Tables

Table

table 工具类的行为类似于 HTML <table> 元素。它定义了一个块级盒子,表格元素渲染表格数据——也就是说它是渲染包含数据的单元格的行和列组成的二维表格。

CSS

Inline Table

inline-table 工具类无法在 HTML 中直接映射。它类似于 HTML <table> 元素,但它是一个行内盒子,而不是块级盒子。在表格内部,它拥有一个块级上下文。

CSS

| inline-table | display: inline-table; |

Table Caption

table-caption 工具类的行为类似于 HTML <caption> 元素。HTML <caption> 元素用于指定表格的标题。

CSS

Table Cell

table-cell 工具类的行为类似于 HTML <td> 元素。HTML <td> 定义了表格中的一行包含的数据。它参与了表格模型。

CSS

Table Row

table-row 工具类的行为类似于 HTML <tr>。HTML <tr> 元素定义了表格中一行的单元格,通过混合使用 <td> (数据单元)和 <th> (标题单元)来组成表格行。

CSS

Table Column

table-column 工具类的行为类似于 HTML <col> 元素。HTML <col> 定义了表格中的一列,它用于定义所有公共单元格的公共语义。它通常被 <colgroup> 元素包裹。

CSS

Table Row Group

table-row-group 工具类的行为类似于 HTML <tbody> 元素。<tbody> 封装了所有表格行(tr 元素),它们构成了表格主体元素 (<table>)。

CSS

Table Column Group

table-column-group 工具类的行为类似于 HTML <colgroup> 元素。HTML <colgroup> 元素定义了表格中的一组列。

CSS

Table Header Group

table-header-group 工具类的行为类似于 HTML <thead> 元素。HTML <thead> 元素定义了一组表示表格表头标题的行。

CSS

table-footer-group 工具类的行为类似于 HTML <tfoot> 元素。HTML <tfoot> 元素定义了一组汇总表格列的行。

CSS

Table Layout

用于控制表格布局算法的工具类。

auto
fixed
CSS

Table Border Collapse

用于控制表格边框折叠或分离的工具类。

collapse
separate
CSS

Table Caption Side

caption 工具类用于指定 <caption> 元素在表格中的位置。这些值与表格的写入模式有关。

top
bottom
CSS

Table Empty Cells

empty-cells 工具类用于指定在无可见内容的情况下表格边框和背景的渲染方式。空单元格的一个很好的用例可能是,你可能不知道一个表是否包含空数据,并且决定隐藏它们。

visible
hidden
CSS

表格工具类示例

使用以下工具类来创建表格行为类似的元素。

Raw Html Tags

<table>
    <caption>Council budget</caption>
    <thead>
        <tr>
            <th>Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Totals</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

使用 Windi 工具类

<div class="table">
    <div class="table-caption">Council budget</div>
    <div class="table-header-group">
        <div class="table-row">
            <div class="table-cell">Items</div>
            <div class="table-cell">Expenditure</div>
        </div>
    </div>
    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell">Donuts</div>
            <div class="table-cell">3,000</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Stationery</div>
            <div class="table-cell">18,000</div>
        </div>
    </div>
    <div class="table-footer-group">
        <div class="table-row">
            <div class="table-cell">Totals</div>
            <div class="table-cell">21,000</div>
        </div>
    </div>
</div>