表格

轻松创建美观的表格，它们具有不同的样式。

用法

要应用此组件，请将 .uk-table 类添加到 <table> 元素。

示例

标记

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

列

要修改列宽或内容，可以使用其他组件。以下是一些有用的示例

标记

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

垂直修饰符

要垂直居中表格内容，只需将 .uk-table-middle 类添加到 <tr> 或 <td> 元素。

修饰符

要以不同的样式显示表格，只需将修饰符添加到 .uk-table 类。

表格悬停

添加 .uk-table-hover 类以在表格行上显示悬停状态。

示例

标记

<table class="uk-table uk-table-hover">...</table>

表格条纹

通过添加 .uk-table-striped 类为表格添加斑马条纹。

示例

标记

<table class="uk-table uk-table-striped">...</table>

表格紧凑

添加 .uk-table-condensed 类以使表格单元格更紧凑。

示例

标记

<table class="uk-table uk-table-condensed">...</table>

组合修饰符

表格组件的修饰符可以相互组合使用。

示例

标记

<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>

响应式表格

如果您的表格碰巧比其容器元素宽，或者最终在特定的视口宽度上变得太大，只需将其包裹在 <div> 元素中，并添加 .uk-overflow-container 类。这将创建一个容器，当其中的元素比容器本身宽时，该容器会提供水平滚动条。

示例

标记

<div class="uk-overflow-container">
    <table>...</table>
</div>