当前位置：首页 > CSS

css制作表格6

2026-03-12 15:39:19CSS

CSS 制作表格的基础方法

使用 table、tr、td 等 HTML 标签结合 CSS 样式可以创建美观的表格。以下是一个基础示例：

<table class="basic-table">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

.basic-table {
  width: 100%;
  border-collapse: collapse;
}
.basic-table th, .basic-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.basic-table th {
  background-color: #f2f2f2;
}

响应式表格设计

通过媒体查询实现小屏幕下的横向滚动：

css制作表格6

.responsive-table {
  overflow-x: auto;
}
@media screen and (max-width: 600px) {
  .responsive-table table {
    width: 100%;
  }
}

斑马纹表格样式

使用 nth-child 选择器实现交替行颜色：

.zebra-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

悬停高亮效果

为表格行添加鼠标悬停交互：

css制作表格6

.hover-table tr:hover {
  background-color: #e6f7ff;
}

固定表头表格

实现内容滚动时表头固定的效果：

<div class="fixed-header-container">
  <table>
    <thead>
      <tr><th>固定标题</th></tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

.fixed-header-container {
  height: 300px;
  overflow-y: auto;
}
.fixed-header-container thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

圆角边框表格

为表格添加现代感的圆角设计：

.rounded-table {
  border-radius: 8px;
  overflow: hidden;
}
.rounded-table th:first-child {
  border-top-left-radius: 8px;
}
.rounded-table th:last-child {
  border-top-right-radius: 8px;
}