Material Design Lite - DataTable
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau và hiển thị một bảng dưới dạng bảng dữ liệu. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | mdl-data-table Xác định bảng như một thành phần MDL và được yêu cầu trên phần tử bảng. |
| 2 | mdl-js-data-table Đặt hành vi MDL cơ bản cho bảng và được yêu cầu trên phần tử bảng. |
| 3 | mdl-data-table--selectable Đặt tất cả / hành vi có thể chọn riêng lẻ (hộp kiểm) và là tùy chọn; đi vào phần tử bảng. |
| 4 | mdl-data-table__cell--non-numeric Đặt định dạng văn bản thành ô dữ liệu và là tùy chọn; đi trên cả tiêu đề bảng và ô dữ liệu bảng. |
| 5 | (none) Theo mặc định, đặt định dạng số thành tiêu đề hoặc ô dữ liệu. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-data-table các lớp để hiển thị một bảng dữ liệu.
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>Kết quả
Xác minh kết quả.