Javascript 位置：按父div固定剪裁_Javascript_Css_Css Position

Javascript 位置：按父div固定剪裁

javascript css

Javascript 位置：按父div固定剪裁,javascript,css,css-position,Javascript,Css,Css Position,因此，我得到了一个使用position:fixed在样式表中实现的表头。我希望能够通过它周围的div来剪裁这个标题，但是当它的宽度大于周围div的宽度时，设置溢出不会导致剪裁。有什么想法吗基本准则是： <html> <style> th { box-sizing: border-box; height: 46px; } </style> <body> <div style="overf

因此，我得到了一个使用position:fixed在样式表中实现的表头。我希望能够通过它周围的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>


th{
框大小：边框框；
高度：46px；
}
名称
单位
地址
配偶
SSN

我在想，也许可以对表应用一个clip属性，然后用JS进行调整，但是无论我尝试放置什么样的剪辑，表都会消失。我一直在使用position:absolute，然后在滚动时用javascript动态地调整它，但它看起来确实很落后，即使它确实从其父div在表上获得了适当的剪辑

有什么想法吗？

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

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

.page{
宽度：400px；
保证金：0自动；
}
.固定{
位置：固定；
宽度：400px；
高度：80px；
背景色：#eee；
}
th{
框大小：边框框；
高度：46px；
}
名称
单位
地址
配偶
SSN

.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>