html - 可以使固定标题继承宽度属性

Question

我有一个具有固定标题行的表。当固定被禁用时，宽度本身正确地空间，但它不再是固定的，并且将滚动出容器 div。将固定添加到属性后，它会正确滚动，但宽度不会对齐。在这个给定的场景下，是否可以在仍然使用这个“固定”属性的同时使宽度对齐？

    .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

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

根据MDN

固定的

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每一页上的固定位置。此值始终创建一个新的堆叠上下文。

请参阅有关固定定位的规范