可以使固定 headers 继承宽度 属性

Question

我有一个 table 有一个固定的 header 行。当 fixed 被禁用时，宽度本身正确间隔，但它不再固定，并且会滚动到容器之外 div。一旦 fixed 添加到 属性，它会正确滚动，但宽度不对齐。在这种给定的情况下，是否可以在仍然使用此 'fixed' 属性?

的同时使宽度对齐

    .container {
        border: 1px solid black;
        height: 100px;
        overflow-y: scroll;
    }
    td {
        font-size: 40px;
    }  
     table {
        table-layout: fixed;
        height: 100%;
    }
    thead{
        position:fixed;
    }

<div class="container">
    <table>
        <thead>
            <tr>
                <th>
                    header
                </th>
                <th>
                    header
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
        </tbody>
    </table>
</div>

jsFiddle: https://jsfiddle.net/meeow314159/3vs9bmsf/2/

Answer 1

不，这是不可能的。因为它不会为元素留下space，所以它没有继承width

根据MDN

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.

参见specs固定定位