Material Design Lite - DataTable - 几微学院 - 几微助手 | 微信商城 | 小程序商城

MDL提供了一系列CSS类来应用各种预定义的视觉和行为增强功能，并将表格显示为数据表.下表列出了可用的类及其效果.

Sr.No.	Class Name&描述
1	mdl-data-table 将表标识为MDL组件，并且在表元素上是必需的.
2	mdl-js-data-table 将基本MDL行为设置为表，并且在表元素上是必需的.
3	mdl-data-table - selectable 设置所有/个人可选行为(复选框)并且是可选的;继续表元素.
4	mdl-data-table__cell - 非数字将文本格式设置为数据单元格并且是可选的;表头和表数据单元都有.
5	(无) 默认情况下，将数字格式设置为标题或数据单元格.

示例

以下示例将帮助您了解 mdl-data-table 类对
显示数据表的使用.

mdl_data_tables.htm

<html>   <head>      <script          src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">      </script>      <link rel = "stylesheet"          href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">      <link rel = "stylesheet"          href = "https://fonts.googleapis.com/icon?family=Material+Icons">     </head>      <body>      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">         <thead>            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>               <th>Class</th><th>Grade</th></tr>         </thead>                  <tbody>            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>               <td>VI</td><td>A</td></tr>            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>               <td>VI</td><td>B</td></tr>            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>               <td>VI</td><td>A</td></tr>         </tbody>      </table>      </body></html>