Material Design Lite - DataTable

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher une table en tant que table de données. Le tableau suivant répertorie les classes disponibles et leurs effets.

N ° Sr. Nom et description de la classe
1

mdl-data-table

Identifie la table en tant que composant MDL et est obligatoire sur l'élément de table.
2

mdl-js-data-table

Définit le comportement MDL de base sur table et est requis sur l'élément de table.
3

mdl-data-table--selectable

Définit le comportement sélectionnable tout / individuel (cases à cocher) et est facultatif; va sur l'élément de table.
4

mdl-data-table__cell--non-numeric

Définit la mise en forme du texte sur la cellule de données et est facultative; va à la fois sur l'en-tête du tableau et les cellules de données du tableau.
5

(none)

Par défaut, définit le formatage numérique sur l'en-tête ou la cellule de données.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-data-table classes pour afficher une table de données.

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>

Résultat

Vérifiez le résultat.