Logo Windi CSS

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>