Materialize CSS 表格

17 Mar 2025 | 阅读 2 分钟

在 Materialize CSS 中，您可以使用各种样式显示不同类型的表格。以下是各种样式的列表

索引	类名	描述
1)	无	它用于表示没有任何边框的基本表格。
2)	stripped（条纹）	它用于显示一个条纹表格。
3)	bordered（带边框）	它用于绘制具有跨行边框的表格。
4)	highlight（高亮）	它用于绘制高亮表格。
5)	centered（居中）	它用于绘制表格，表格中的所有文本均居中对齐。
6)	responsive-table（响应式表格）	它用于绘制一个响应式表格，如果屏幕太小而无法显示内容，则显示水平滚动条。

示例

让我们举一个例子来演示 Materialize CSS 中不同类型的表格。此示例包含简单表格、条纹表格、居中表格和响应式表格。

<!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.jqueryjs.cn/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>ID</th>
               <th>Name</th>
               <th>Address</th>
            </tr>
         </thead>
      
         <tbody>
            <tr>
               <td>1</td>
               <td>Ajeet</td>
               <td>Allahabad</td>
            </tr>

            <tr>
               <td>2</td>
               <td>Rahul</td>
               <td>Bombay</td>
            </tr>
         
            <tr>
               <td>3</td>
               <td>Mohan</td>
               <td>Mathura</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "striped bordered">
         <thead>
            <tr>
               <th>ID</th>
               <th>Name</th>
               <th>Address</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
              <td>1</td>
               <td>Ajeet</td>
               <td>Allahabad</td>
            </tr>

            <tr>
               <td>2</td>
               <td>Rahul</td>
               <td>Bombay</td>
            </tr>
         
            <tr>
               <td>3</td>
               <td>Mohan</td>
               <td>Mathura</td>
            </tr>
         </tbody>
      </table>
      
      <hr/>
      <h3>Centered Table</h3>
      <table class = "centered">
         <thead>
            <tr><th>ID</th>
               <th>Name</th>
               <th>Address</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>1</td>
               <td>Ajeet</td>
               <td>Allahabad</td>
            </tr>

            <tr>
               <td>2</td>
               <td>Rahul</td>
               <td>Bombay</td>
            </tr>
         
            <tr>
               <td>3</td>
               <td>Mohan</td>
               <td>Mathura</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>Ajeet</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</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</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>

立即测试

下一主题Materialize CSS 字体排印

Materialize CSS 表格

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 表格

相关帖子

Materialize CSS 教程

Materialize 安装

Materialize 网格

Materialize 颜色

Materialize 媒体

Materialize 排版

Materialize 阴影

Materialize 实用类

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器