表格 - MDUI 开发文档, Material Design 前端框架

样式

基础表格

为 table 标签添加类 .mdui-table 即可为表格赋予基本的样式。

Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

响应式

如果表格宽度过大，可能会导致页面出现横向滚动条。将 .mdui-table 元素包裹在 .mdui-table-fluid 元素内，即可在表格宽度超出页面宽度时，使表格支持水平滚动。

<div class="mdui-table-fluid">
  <table class="mdui-table">
    ...
  </table>
</div>

鼠标悬浮

在 .mdui-table 元素上添加 .mdui-table-hoverable 类可以让 tbody 中的每一行对鼠标悬浮状态作出响应。

Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-hoverable">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

列对齐方式

按照 Material Design 的规范，应该把表格中的文本列左对齐，数值列右对齐。

MDUI 中表格列默认使用左对齐，在数值列的 <th> 标签上添加类 .mdui-table-col-numeric 即可使该列向右对齐。

Example

#	First Name	Last Name	age
1	Mark	Otto	18
2	Jacob	Thornton	21
3	Larry the Bird		9

<div class="mdui-table-fluid">
    <table class="mdui-table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th class="mdui-table-col-numeric">age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>18</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>21</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry the Bird</td>
          <td></td>
          <td>9</td>
        </tr>
      </tbody>
    </table>
  </div>

列选择

在 .mdui-table 元素上添加类 .mdui-table-selectable 即可在每一行的前面添加一个复选框。

选中复选框后，会在该行的 <tr> 元素上添加类 .mdui-table-row-selected。

也可以预先在 <tr> 元素上添加类 .mdui-table-row-selected，使该行处于默认选中状态。

Example

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calclum (%)	Lron (%)
Frozen yogurt	159	6.0	24	4.0	87	14%	1%
Ice cream sandwich	237	9.0	37	4.3	129	8%	1%
Eclair	262	16.0	24	6.0	337	6%	7%

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-selectable">
    <thead>
      <tr>
        <th>Dessert (100g serving)</th>
        <th class="mdui-table-col-numeric" mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}">Calories</th>
        <th class="mdui-table-col-numeric">Fat (g)</th>
        <th class="mdui-table-col-numeric">Carbs (g)</th>
        <th class="mdui-table-col-numeric">Protein (g)</th>
        <th class="mdui-table-col-numeric">Sodium (mg)</th>
        <th class="mdui-table-col-numeric" mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}">Calclum (%)</th>
        <th class="mdui-table-col-numeric">Lron (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="mdui-table-row-selected">
        <td>Frozen yogurt</td>
        <td>159</td>
        <td>6.0</td>
        <td>24</td>
        <td>4.0</td>
        <td>87</td>
        <td>14%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Ice cream sandwich</td>
        <td>237</td>
        <td>9.0</td>
        <td>37</td>
        <td>4.3</td>
        <td>129</td>
        <td>8%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Eclair</td>
        <td>262</td>
        <td>16.0</td>
        <td>24</td>
        <td>6.0</td>
        <td>337</td>
        <td>6%</td>
        <td>7%</td>
      </tr>
    </tbody>
  </table>
</div>

动态生成的表格

如果你的表格是动态生成的，或者动态修改了表格属性，则需要调用 mdui.updateTables() 方法来重新初始化表格。

该方法可以接受一个含 <table class="mdui-table"> 元素的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数，表示只重新初始化指定的表格。如果没有传入参数，则将重新初始化页面中所有的表格。

CSS 类名列表

类名	效果
`.mdui-table`	定义表格组件。
`.mdui-table-fluid`	定义响应式表格。
`.mdui-table-hoverable`	使表格的行在鼠标悬浮状态做出响应。
`.mdui-table-col-numeric`	使列右对齐。
`.mdui-table-selectable`	在每一行前面添加复选框。
`.mdui-table-row-selected`	选中的行会有该类。

表格

调用方式

相关阅读

样式

基础表格

响应式

鼠标悬浮

列对齐方式

列选择

动态生成的表格

CSS 类名列表