- Material Design Lite 教程
- MDL - 主页
- MDL - 概述
- MDL - 环境设置
- MDL - 布局
- MDL - 网格
- MDL - 选项卡
- MDL - 页脚
- MDL - 徽章
- MDL - 按钮
- MDL - 卡片
- MDL - 进度条
- MDL - 纺纱机
- MDL - 菜单
- MDL - 滑块
- MDL - 复选框
- MDL - 单选按钮
- MDL-图标
- MDL - 开关
- MDL-数据表
- MDL - 文本字段
- MDL - 工具提示
- Material Design Lite 资源
- MDL - 快速指南
- MDL - 有用的资源
- MDL - 讨论
Material Design Lite - 数据表
MDL 提供了一系列 CSS 类来应用各种预定义的视觉和Behave增强功能并将表格显示为数据表。下表列出了可用的类别及其效果。
先生。 | 类名和描述 |
---|---|
1 | MDL 数据表 将表标识为 MDL 组件,并且在表元素上是必需的。 |
2 | mdl-js-数据表 将基本 MDL Behave设置为表,并且在表元素上是必需的。 |
3 | mdl-数据表--可选 设置所有/单个可选Behave(复选框)并且是可选的;放在表格元素上。 |
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>
结果
验证结果。