Tailwind Table
2020-06-12 本文已影响0人
JunChow520
表格样式工具类
表格布局table layout
CSS中table-layout属性用于设置表格布局的类型，即用于显示表格行、列、单元格的算法规则。
table-layout: automatic | fixed;
table-layout表格布局算法属性具有两个可选值
| 属性值 | 描述 |
|---|---|
| automatic | 默认，表格自动布局，列宽由单元格内容自行设置。 |
| fixed | 表格固定布局，列宽由表格宽度和其他列宽决定。 |
自动表格布局
- 自动表格布局中列宽是由列单元格中没有折行的最大宽度的内容所决定的。
- 自动表格布局算法较慢，因为需要在确定最终布局之前访问表格中所有内容。
固定表格布局
- 固定表格布局与自动表格布局相比更快
- 固定表格布局中水平布局仅取决于表格宽度、表格边框宽度、单元格间距，与单元格内容无关。
- 使用固定表格布局用户代理在接收到第一行后即可显示表格
Tailwind为表格布局提供了两个工具类
| 工具类 | 属性 |
|---|---|
| table-auto | table-layout:automatic; |
| table-fixed | table-layout:fixed; |
边框合并border collapse
CSS中border-collapse属性用于设置表格的边框之间是否能够合并为一个单一边框，默认为分离显示。
border-collapse: separator | collapse;
border-collapse默认属性值为separator边框分离，此时不会忽略border-spacing边框间距和empty-cells空白单元格属性。当设置为collapse合并边框时，会忽略border-spacing和empty-cells属性。
Tailwind为border-collapse属性提供了两个工具
| 工具类 | 属性 |
|---|---|
| border-separator | border-collapse:separator; |
| border-collapse | border-collapse:collapse; |
