当前位置：首页 > CSS

css制作的表格

2026-03-12 01:39:16CSS

基础表格结构

使用 <table>、<tr>、<th> 和 <td> 标签创建基础表格：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

边框样式

通过 border 属性添加边框，合并边框使用 border-collapse：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

斑马纹效果

使用 nth-child(even) 实现交替行背景色：

css制作的表格

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

悬停高亮

为行添加鼠标悬停效果：

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

响应式表格

通过 overflow-x: auto 处理小屏幕下的滚动：

css制作的表格

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

表头固定

结合 position: sticky 实现滚动时表头固定：

th {
  position: sticky;
  top: 0;
  background-color: #4CAF50;
  color: white;
}

对齐方式

控制单元格内容对齐：

td {
  text-align: center;
  vertical-align: middle;
}

高级样式示例

完整样式组合：

table {
  border-collapse: collapse;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}
th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  text-transform: uppercase;
}
td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}