css制作biaoge

使用CSS制作表格

HTML中的<table>元素结合CSS可以创建样式丰富的表格。以下是一些常见方法和样式调整技巧：

基础表格结构

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

边框样式

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}

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

斑马纹效果

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

悬停高亮

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

固定表头

thead {
  position: sticky;
  top: 0;
  background-color: white;
}

响应式表格

对于小屏幕设备，可以添加水平滚动：

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

高级样式示例

th {
  background-color: #4CAF50;
  color: white;
}

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

通过组合这些CSS属性，可以创建从简单到复杂的各种表格样式。关键CSS属性包括border-collapse、padding、text-align和伪类选择器等。