![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5響應式table表格佈局</title>
<style type="text/css">
body {
font-size: 14px;
font-weight: normal;
}
table.responsive {
width: 98%;
margin: 0 auto;
border: 1px solid #ccc;
border-collapse: collapse;
/*border-collapse:collapse合併內外邊距(去除表格單元格默認的2個像素內外邊距*/
}
/* 設置表格單元格邊框 */
table.responsive th,
table.responsive td {
border: 1px solid #ccc;
color: #666;
padding: .5em 1em;
}
/* 設置表頭顏色 */
table.responsive th {
font-weight: normal;
background: #F2F2F2;
}
/* 設置超鏈接格式 */
table.responsive .actions a {
color: #ff5c00;
/* 設置超鏈接字體沒有下劃線 */
text-decoration: none;
padding: 0 4px;
}
table.responsive .number,
table.responsive .actions {
text-align: center;
}
/* 捕捉瀏覽器寬度最大爲480px時觸發以下css樣式 */
@media (max-width: 480px) {
/* 清除其它寬度下所設置的表格樣式 */
table.responsive {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
/* 隱藏表頭（這裏的隱藏與visiblity隱藏不同，這裏的隱藏將不會爲隱藏部分留下空白位置，而visiblity會爲隱藏部分留下空白位置） */
table.responsive thead {
display: none;
}
/* 將所有表格變成塊級元素，以使表格獨行顯示 */
table.responsive td {
display: block;
border: none;
}
/* 設置第一例左對齊並添加顏色 */
table.responsive .number {
text-align: left;
background: #35B558;
}
/* 設置相對路徑，以便子元素使用絕對路徑 */
table.responsive tr {
position: relative;
}
/* 通過絕對路徑設置修改刪除在第一行：
因number的position值爲static，所以number會在tr容器的第一行，
這裏修改刪除通過絕對路徑，設置距tr容器上面0px，則修改刪除也會出現在tr容器第一行，這裏一定要設置tr位置爲相對路徑 */
table.responsive .actions {
position: absolute;
right: 0;
top: 0;
}
}
</style>
</head>
<body>
<table class="responsive">
<thead>
<tr>
<th>程序序號</th>
<th>課程名稱</th>
<th>課程操作</th>
</tr>
</thead>
<tr>
<td class="number">150406</td>
<td class="name">移動應用開發</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">刪除</a>
</td>
</tr>
<tr>
<td class="number">150407</td>
<td class="name">HTML前段開發</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">刪除</a>
</td>
</tr>
</table>
</body>
</html>
