分享一下前端table表格自适应方案

久伴

643
文章

535
评论

2020年4月23日12:54:13 1 386 1229字阅读4分5秒

现在前端框架满天飞，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>

这种表格看起来就很别扭，想当然不是大家喜欢的吧

自适应表格

在线预览

<!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>

继续阅读