<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base target="_blank" />
<title>三十客 - 【表格】一个固定列宽的表格示例</title>
<style>
.users {
table-layout: fixed;
width: 100%;
white-space: nowrap;
}
.row-ID {
width: 10%;
}
.row-name {
width: 30%;
}
.row-job {
width: 20%;
}
.row-desc {
width: 40%;
}
.users td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.users th {
background: darkblue;
color: white;
}
.users td,
.users th {
text-align: left;
padding: 5px 10px;
}
.users tr:nth-child(even) {
background: lightblue;
}
</style>
</head>
<body>
<table class="users">
<thead>
<tr>
<th class="row-1 row-ID">ID</th>
<th class="row-2 row-name">姓名</th>
<th class="row-3 row-job">职位</th>
<th class="row-4 row-desc">描述<th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>毛三十</td>
<td>前端工程师</td>
<td>这名员工是我所见过的最差劲的前端工程师，没有之一</td>
</tr>
<tr>
<td>0002</td>
<td>毛三胖dddddddddddddddddddddddddddddrrrrrrrrddddddddd</td>
<td>JAVA程序员</td>
<td>一个合格的程序员</td>
</tr>
</tbody>
</table>
</body>
</html>
原文链接：固定列宽的表格及示例演示
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
