Materialise CSS table用法

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

Index	班级名称	Description
1)	none	它用于表示没有任何边界的基本表。
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.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> 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>

【Materialise CSS table用法】立即测试