Material Design Lite 数据表

2018-12-19 18:17 更新

该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于显示器表作为数据表。下表中提到的可用类和它们的影响。

SN	类名称和说明
1	MDL-数据表标识表作为MDL组件，所需的表元素。
2	MDL-JS-数据表设置基本MDL行为表并需要表元素。
3	MDL-数据表-可选将所有/单个可选行为（复选框）和可选;那张表元素。
4	MDL-数据table__cell -非数字设置文本格式数据的单元格，是可选的;接着两个表头和表数据单元。
五	（没有）默认情况下，设置了数字格式，以头或数据的单元格。

例

以下例子展示了利用MDL-数据表的类来显示的数据表。

mdl_data_tables.htm

<html>
<head>
   <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
   <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >	  
</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>

结果

验证结果。

以上内容是否对您有帮助：

← Material Design Lite 交换机

Material Design Lite 文本框 →

写笔记

我要补充