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ả.