Materialize можно использовать для отображения разных типов таблиц, используя различные стили над таблицами.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
Никто Представляет базовую таблицу без каких-либо границ. |
| 2 |
раздетый Отображает раздетую таблицу. |
| 3 |
окаймленный Рисует таблицу с рамкой между рядами. |
| 4 |
основной момент Рисует подсвеченную таблицу. |
| 5 |
в центре Рисует таблицу со всем текстовым центром, выровненным по таблице. |
| 6 |
отзывчивый стол Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого. |
Никто
Представляет базовую таблицу без каких-либо границ.
раздетый
Отображает раздетую таблицу.
окаймленный
Рисует таблицу с рамкой между рядами.
основной момент
Рисует подсвеченную таблицу.
в центре
Рисует таблицу со всем текстовым центром, выровненным по таблице.
отзывчивый стол
Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.
пример
materialize_tables.htm
<!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> <style> div { width : 200px; height : 200px; } </style> </head> <body class = "container"> <h2>Tables Demo</h2> <hr/> <h3>Simple Table</h3> <table> <thead> <tr> <th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <h3>Stripped Table with borders</h3> <table class = "striped bordered"> <thead> <tr> <th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <hr/> <h3>Centered Table</h3> <table class = "centered"> <thead> <tr><th>Student</th> <th>Class</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>A</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>B</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>A</td> </tr> </tbody> </table> <h3>Responsive table</h3> <table class = "responsive-table"> <thead> <tr> <th>Student</th> <th>Class</th> <th>Data #1</th> <th>Data #2</th> <th>Data #3</th> <th>Data #4</th> <th>Data #5</th> <th>Data #6</th> <th>Data #7</th> <th>Data #8</th> <th>Data #9</th> <th>Data #10</th> </tr> </thead> <tbody> <tr> <td>Mahesh Parashar</td> <td>VI</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>19</td> <td>20</td> </tr> <tr> <td>Rahul Sharma</td> <td>VI</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>19</td> <td>20</td> </tr> <tr> <td>Mohan Sood</td> <td>VI</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>19</td> <td>20</td> </tr> </tbody> </table> </body> </html>
Результат
Проверьте результат.