調(diào)用方式

表格在頁(yè)面加載完后會(huì)自動(dòng)初始化。對(duì)于動(dòng)態(tài)生成的表格，需要調(diào)用 mdui.updateTables() 進(jìn)行初始化。

相關(guān)資料

Material Design 數(shù)據(jù)表格設(shè)計(jì)規(guī)范

樣式

基礎(chǔ)表格

為 table 標(biāo)簽添加類 .mdui-table 即可為表格賦予基本的樣式。

在線運(yùn)行

響應(yīng)式

如果表格寬度過(guò)大，可能會(huì)導(dǎo)致頁(yè)面出現(xiàn)橫向滾動(dòng)條。將 .mdui-table 元素包裹在 .mdui-table-fluid 元素內(nèi)，即可在表格寬度超出頁(yè)面寬度時(shí)，使表格支持水平滾動(dòng)。

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

鼠標(biāo)懸浮

在 .mdui-table 元素上添加 .mdui-table-hoverable 類可以讓 tbody 中的每一行對(duì)鼠標(biāo)懸浮狀態(tài)作出響應(yīng)。

在線運(yùn)行

列對(duì)齊方式

按照 Material Design 的規(guī)范，應(yīng)該把表格中的文本列左對(duì)齊，數(shù)值列右對(duì)齊。

MDUI 中表格列默認(rèn)使用左對(duì)齊，在數(shù)值列的 <th> 標(biāo)簽上添加類 .mdui-table-col-numeric 即可使該列向右對(duì)齊。

在線運(yùn)行

列選擇

在 .mdui-table 元素上添加類 .mdui-table-selectable 即可在每一行的前面添加一個(gè)復(fù)選框。

選中復(fù)選框后，會(huì)在該行的 <tr> 元素上添加類 .mdui-table-row-selected。

也可以預(yù)先在 <tr> 元素上添加類 .mdui-table-row-selected，使該行處于默認(rèn)選中狀態(tài)。

在線運(yùn)行

動(dòng)態(tài)生成的表格

如果你的表格是動(dòng)態(tài)生成的，或者動(dòng)態(tài)修改了表格屬性，則需要調(diào)用 mdui.updateTables() 方法來(lái)重新初始化表格。

該方法可以接受一個(gè)含 <table class="mdui-table"> 元素的 CSS 選擇器、或者 DOM 元素、或者 DOM 元素組成的數(shù)組作為參數(shù)，表示只重新初始化指定的表格。如果沒(méi)有傳入?yún)?shù)，則將重新初始化頁(yè)面中所有的表格。

CSS 類名列表