当前位置：首页 > CSS

css表格制作

2026-01-08 11:57:23CSS

CSS 表格制作基础

使用 CSS 可以创建美观且响应式的表格。以下是一些基本方法：

table 元素用于定义表格，tr 定义行，td 定义单元格，th 定义表头单元格。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

表格样式设置

通过 CSS 可以设置表格的边框、间距和颜色：

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

border-collapse: collapse 使边框合并为单一线条，避免双边框效果。

响应式表格设计

对于小屏幕设备，可以通过以下方式使表格可滚动：

css表格制作

div.table-container {
  overflow-x: auto;
}

@media screen and (max-width: 600px) {
  table {
    width: auto;
  }
}

将表格包裹在 div 容器中并设置 overflow-x: auto 可以在窄屏幕上水平滚动查看完整表格。

表格行交替颜色

使用 nth-child 选择器实现斑马纹效果：

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

tr:hover {
  background-color: #e9e9e9;
}

这会使偶数行显示浅灰色背景，鼠标悬停时行背景变色。

css表格制作

表格单元格合并

通过 colspan 和 rowspan 属性可以合并单元格：

<tr>
  <td colspan="2">合并的水平单元格</td>
</tr>
<tr>
  <td rowspan="2">合并的垂直单元格</td>
  <td>普通单元格</td>
</tr>

colspan 指定单元格横跨的列数，rowspan 指定纵跨的行数。

高级表格样式

使用 CSS 可以创建更复杂的表格效果：

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
}

th {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
}

position: sticky 使表头在滚动时保持可见，box-shadow 添加阴影效果，border-radius 圆角边框。