gpt4 book ai didi

javascript - 位置 :fixed clipping by parent div

转载 作者:行者123 更新时间:2023-11-28 13:22:25 25 4
gpt4 key购买 nike

所以我得到了一个使用样式表中的 position:fixed 实现的表头。我希望能够通过它周围的 div 剪裁这个 header ,但是设置溢出不会导致它在宽度大于周围 div 的宽度时被剪裁。有什么想法吗?

基本代码是:

th {
box-sizing: border-box;
height: 46px;
}
<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>

我在想也许可以将剪辑属性应用于表格,然后使用 JS 对其进行调整,但无论我尝试放置什么剪辑,表格都会消失。我一直在使用 position:absolute,然后在滚动时使用 javascript 对其进行动态调整,但它看起来真的很慢,即使它确实从其父 div 对表格进行了适当的裁剪。

有什么想法吗?

最佳答案

固定和绝对定位元素在页面流之外(您可能会说在更高层),并且不受页面上其他元素的影响。

在您的内容周围放置一个固定的包装 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>

关于javascript - 位置 :fixed clipping by parent div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14530635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com