Tailwind Table

表格样式工具类

表格布局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;