Question

所以我有一个表头，它是使用position：在样式表中修复的。我希望能够将这个标题夹在它的周围div之外，但设置溢出不会导致它的宽度大于周围div的宽度时被剪裁。有什么想法吗？

基本代码是：

<html>
<style>
    th {
        box-sizing: border-box;
        height: 46px;
    }
</style>
<body>
    <div style="overflow: hidden; border: 5px solid black;width: 20%; height: 50%;">
    <table style="width: 1396px; position:fixed">
    <thead>
        <tr>
            <th style="width: 146px;">Name</th>
            <th style="width: 129px;">Company</th>
            <th style="width: 116px;">Address</th>
            <th style="width: 135px;">Spouse</th>
            <th style="width: 141px;">SSN</th>
        </tr>
    </thead>
</table>
</div>
</body>
</html>

我在考虑将剪辑属性应用到表中，然后使用JS调整它，但无论我尝试放置什么剪辑，表都会消失。我一直在使用position：absolute然后在滚动时使用javascript动态调整它，但这看起来非常滞后，即使它确实从其父div获得了正确的剪裁。

有什么想法吗？

Answer 1

固定和绝对定位的元素位于页面流之外（在较高层，您可能会说），并且不受页面上其他元素的影响。

在您的内容周围放置一个固定的包装器div，作为固定宽度的容器。

http://jsfiddle.net/e9vAA

.page {
    width: 400px;
    margin: 0 auto;
}
.fixed {
    position: fixed;
    width: 400px;
    height: 80px;
    background-color: #eee;
}
th {
    box-sizing: border-box;
    height: 46px;
}

<div class="page">
    <div class="fixed">
        <table width="100%">
            <thead>
                <tr>
                    <th style="width: 46px;">Name</th>
                    <th style="width: 29px;">Company</th>
                    <th style="width: 16px;">Address</th>
                    <th style="width: 35px;">Spouse</th>
                    <th style="width: 41px;">SSN</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

position：由父div修复剪辑

1 个答案: