跳到主要内容

table

表格样式​

table-layout 属性​

作用​

  • 设置表格布局；
table {
  table-layout: fixed;
  width: 120px;
}

属性值​

auto​
  • 根据表格内容自动调整表格宽度；
fixed​
  • 根据表格第一行的宽度设置表格宽度；

border-collapse 属性​

作用​

  • 设置表格内部相邻单元格是否共享边框；
table {
  border-collapse: collapse;
}

属性值​

collapse​
  • 共享；
separate​
  • 不共享；

caption-side 属性​

作用​

  • 设置表格 caption 标签位置；
table {
  caption-side: top;
}

属性值​

top​
  • 表格顶部；
bottom​
  • 表格底部；

最佳实践​

表格样式技巧​

  • table-layout 属性值设置为 fixed；
  • border-collapse 属性值设置为 collapse；
  • 使用 thead>，tbody，<tfoot 标签；
  • 使用 text-align 属性；
  • 使用斑马条纹；

斑马条纹​

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

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

/* 若浏览器不支持 :nth-child, 设置表格背景颜色 */
table {
  background-color: #ff33cc;
}