现在前端框架满天飞，bootstrap，mdui，meiziUI,element等等框架，使用框架自带的table类基本三二分钟就搞定一个自适应的table表格，但是实现的方案，大家了解吗
久伴在一次项目实战中，需要一个table表格，虽然没要求要自适应，但是热爱前端的久伴是个完美主义者，table当然要自适应才舒服
基本表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table自适应表格</title>
</head>
<body>
<table>
<caption>我是表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生年月</th>
</tr>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>久伴</td>
<td>24</td>
<td>男</td>
<td>1996年8月22日</td>
</tr>
</tbody>
</table>
</body>
</html>
这种表格看起来就很别扭，想当然不是大家喜欢的吧
自适应表格
在线预览
[link href=http://demo.jiubx.com/table/table.html]在线预览[/link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table自适应表格</title>
<style>
table {
width: 100%;
text-align: center;
border-spacing: 0;/**设置相邻单元格的边框间的距离**/
border-collapse: collapse;/**边框会合并为一个单一的边框**/
color:#5a5a5a;
table-layout: fixed;/**固定table表格**/
}
table thead {
background-color: #d9edf7;
}
table td,table th{
border:1px solid #ccc;
overflow: hidden;/**溢出隐藏**/
white-space: nowrap;/**不换行**/
text-overflow: ellipsis;/**溢出不可见部分使用...代替**/
}
</style>
</head>
<body>
<table>
<caption>我是表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生年月</th>
</tr>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>久伴</td>
<td>24</td>
<td>男</td>
<td>1996年8月22日</td>
</tr>
</tbody>
</table>
</body>
</html>
日常互访 😀