使用 overflow-x:auto容器制作响应式表格
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
text-align:center;
}
th,td{
width:100px;
height:50px;
}
th{
background-color:green;
color:white;
}
tr:nth-child(even){
background-color:#f2f2f2;
}
tr:hover{
background-color:#f8f8f8;
}
div{
overflow-x:auto;
}
</style>
</head>
<body>
<h1>响应式表格制作</h1>
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>Elon</td>
<td>Musk</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
</table>
</div>
</body>
</html>
运行效果:
注：请用鼠标拉动浏览器窗口，注意表格大小的变化。
评论