跳到主要内容

表格

table-layout 如何控制表格布局？​

table {
  table-layout: auto; /* 根据内容自动调整宽度 */
  table-layout: fixed; /* 根据第一行宽度设定表格宽度 */
}

border-collapse 如何控制边框？​

  • 作用: 设置相邻单元格是否共享边框;
table {
  border-collapse: collapse; /* 共享 */
  border-collapse: separate; /* 不共享 */
}

caption-side 如何设置标题位置？​

table {
  caption-side: top;
  caption-side: 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;
}