Question

此固定标头表在水平调整窗口大小时会使列变形。有没有办法阻止它？

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }
        table th {
            border-left: 1px solid blue;
        }
        table th,
        table td {
            padding: 5px;
            text-align: left;
            border-left:1px solid blue;
        }

        table th, table td {
            width: 150px;
        }
        table thead tr {
            display: block;
            position: relative;
        }
        table tbody {
            display: block;
            overflow: auto;
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>pick_up_location</th>
                <th>destination</th>
                <th>instruction</th>
                <th>created_at</th>
                <th>status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12322</td>
                <td>Whanga Road</td>
                <td>Crescent Street</td>
                <td>Call when arrive</td>
                <td>123442342331</td>
                <td>comming</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

请记住这个固定标头表。意味着你有100行。你可以滚动行但标题位置是固定的。无法删除显示块属性。

更新：

Mark回答，桌子看起来不错但在小屏幕上仍然会变形。它的截图

Answer 1

请勿对标记应用明确的宽度或高度。相反，给它：

max-width:100%;
max-height:100%;

Answer 2

如果没有调整大小的问题，则必须使用％来处理高度和宽度。

喜欢：宽度：30％; 身高：40％;

希望能帮到你。

Answer 3

只需修改最后两个ccs声明，如下所示：

table{
        display: block;
        position: relative;
    }
    table tbody {

        position : relative;
        overflow: auto;
        width: 100%;
        height: 300px;
    }

Answer 4

向所有单元格添加word-break: break-all;会使您的代码正常工作（差不多，因为所有字符的宽度都不相同）
见https://jsfiddle.net/3wn1zzfn/

您的问题是，如果无法将所有单元格放在表格中，则会覆盖width: 150px;，宽度现在基于该行的长度。

Answer 5

这里的问题是你正在申请display: block，你不应该在桌子上使用它。同时删除表上的px值。使用％，或者删除它

删除以下代码行：

    table th, 
      table td {
        /*width: 150px*/
    }
     table thead tr {
        /*display: block;
        position: relative;*/
    }
    table tbody {
        /*display: block;*/
        overflow: auto;
        width: 100%;
        height: 300px;
    }

这里有一个代码表来显示它： http://codepen.io/sandrina-p/pen/qNYork?editors=1100

- 编辑 -

在-1之前，请告诉我我的解决方案有什么问题，改进它？

调整窗口大小时固定标题表变形

5 个答案: