免費(fèi) AI IDE
Pure.CSS表
2018-12-23 09:48 更新
PURE.CSS可以用來(lái)顯示不同類型采用各種樣式超過(guò)純表的表。
| S.N. | 類名稱和描述 |
|---|---|
| 1 | pure-table 代表具有任何默認(rèn)的填充，邊框和標(biāo)題強(qiáng)調(diào)一個(gè)基本的表格。 |
| 2 | pure-table-bordered 繪制跨行的邊框表。 |
| 3 | pure-table-horizontal 繪制帶有水平線的表格。 |
| 4 | pure-table-striped 顯示一個(gè)精簡(jiǎn)表。 |
| 五 | pure-table-odd 如果應(yīng)用于其他所有tr， 則更改行的背景并創(chuàng)建斑馬風(fēng)格的效果。 |
例
purecss_tables.htm
<html>
<head>
<title>The PURE.CSS Tables</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class="pure-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>Bordered Table</h3>
<table class="pure-table pure-table-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>
<h3>Table with Horizontal Borders</h3>
<table class="pure-table pure-table-horizontal">
<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</h3>
<table class="pure-table pure-table-striped">
<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>
</body>
</html>
結(jié)果
驗(yàn)證結(jié)果。
Tables Demo
Simple Table
| Student | Class | Grade |
|---|---|---|
| Mahesh Parashar | VI | A |
| Rahul Sharma | VI | B |
| Mohan Sood | VI | A |
Bordered Table
| Student | Class | Grade |
|---|---|---|
| Mahesh Parashar | VI | A |
| Rahul Sharma | VI | B |
| Mohan Sood | VI | A |
Table with Horizontal Borders
| Student | Class | Grade |
|---|---|---|
| Mahesh Parashar | VI | A |
| Rahul Sharma | VI | B |
| Mohan Sood | VI | A |
Stripped Table
| Student | Class | Grade |
|---|---|---|
| Mahesh Parashar | VI | A |
| Rahul Sharma | VI | B |
| Mohan Sood | VI | A |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：