table 表格布局的width:1%

作者: 哼_ | 来源:发表于2018-06-26 10:08 被阅读35次

table 表格布局的width:1%
table表格
Tailwind Table
网格布局介绍
table布局方式与div+css布局的区别细讲
[HTML表格]3.表格嵌套
HTML（四）表格
JS & JQuery表格操作，修改内容，待改进提交
HTML表格
原声css table布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       
thead td{
    width: 1%;
}
        table thead,
        tbody tr {
            display: table;
            width: 99%;
            table-layout: fixed;
        }

        table thead {
            width: calc( 100% - 1em)
        }
        tbody td{
            border: 1px solid #eee;
            height: 40px;
        }
    </style>
</head>

<body>

    <div style="height:280px; width: 800px;border:1px solid red;">
        <table style="width: 100%;border-collapse: collapse;" cellpadding=0 cellspaceing=0>
            <thead style="font-size: 15px;text-align:center;display:block;border-bottom:1px solid #e8e8e8;">
                <tr style="">
                    <td style="height:54px;">测站名称</td>
                    <td style="">管理单位</td>
                    <td style=" ">建设单位</td>
                    <td style=" ">最新到报时间</td>
                    <td style="">应该到报数</td>
                    <td style=" ">实际到报数</td>
                    <td>测站运行状态</td>
                </tr>
            </thead>
            <tbody id="tab" style="text-align:center;overflow-y:auto;height:210px;display:block;font-size: 14px;">
               
               
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

以上代码是实现了,table的表头不动,内容实现滚动效果;
效果图:

效果如图
做这个效果的时候,查了一些资料,有的说是两个table来做,有的是两个div来做,都比较麻烦,这个是充分利用了table的thead 和tbody标签,实现这个效果
但是css属性中有一个 width:1% 这个属性,查到了一篇文章
深入理解1% table-cell width

image.png
作者发表于2015年,唉,为自己的技术汗颜啊.

所以这个表格的大小是根据单元格的大小确定的。有前端基础的都知道，表格中每个单元格是有自己的最小宽度的，这样我们设置了”width: 1%”实际上是设置table的大小为单元格的最小宽度的100倍。但是很明显，表格是不可能这么宽的，这里可以理解为让表格的宽度尽可能的宽。而且根据单元格必须填满表格一行的特性，就自然呈现出这样的效果。