试图使固定表标题与水平滚动条.如何设置溢出:自动，但保持空白透明

Trying to make fixed table headers with horizontal scroll bar. How to set overflow: auto, but keep margins transparent?

本文关键字：自动 溢出 设置 透明 空白 标题 何设置 滚动条 水平      更新时间：2023-09-26

我正在尝试制作一个具有固定标题和水平滚动功能的表，但要做到这一点，我需要使"section"的上边距在我这里透明:

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.section {
    position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #500;
    margin-top: 37px;
}
.container {
    margin-top: -37px;
    overflow-y: auto;
    height: 200px;
}
table {
    border-spacing: 0;
    width:100%;
}
td + td {
    border-left:1px solid #eee;
}
td, th {
    border-bottom:1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
}
th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
th div {
    position: absolute;
    margin-top:-37px;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #800;
}
th:first-child div {
    border: none;
}
<div class="section">
    <div class="container">
        <table>
            <thead>
                <tr class="header">
                    <th>Table attribute name
                        <div>Table attribute name</div>
                    </th>
                    <th>Value
                        <div>Value</div>
                    </th>
                    <th>Description
                        <div>Description</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>align</td>
                    <td>left, center, right</td>
                    <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
                </tr>
                <tr>
                    <td>bgcolor</td>
                    <td>rgb(x,x,x), #xxxxxx, colorname</td>
                    <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
                </tr>
                <tr>
                    <td>border</td>
                    <td>1,""</td>
                    <td>Specifies whether the table cells should have borders or not</td>
                </tr>
                <tr>
                    <td>cellpadding</td>
                    <td>pixels</td>
                    <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
                </tr>
                <tr>
                    <td>cellspacing</td>
                    <td>pixels</td>
                    <td>Not supported in HTML5. Specifies the space between cells</td>
                </tr>
                <tr>
                    <td>frame</td>
                    <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
                    <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
                </tr>
                <tr>
                    <td>rules</td>
                    <td>none, groups, rows, cols, all</td>
                    <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
                </tr>
                <tr>
                    <td>summary</td>
                    <td>text</td>
                    <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>pixels, %</td>
                    <td>Not supported in HTML5. Specifies the width of a table</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
https://jsfiddle.net/byB9d/6212/

提前感谢任何有建议的人!

注:我想要一个纯css解决方案，请!

我决定删除你的大部分css(希望)给这个问题一个更清晰的答案。然而，我没有改变任何你的html。

修改代码

x-scrolling and width

该方法依赖于使用"table"作为"head"answers"tbody"的容器。"table"将决定沿x轴的滚动。因此它有"overflow-x: auto"。这样，当滚动表格时，"head"可以保持在"tbody"的上方。(后面会解释)

此元素还决定了表格在网页上的宽度。

为了使内容水平滚动，我们必须确保"tbody"answers" head"的总宽度大于"table"的宽度。

最后，您还应该为单元格添加相同的宽度，以便标题显示在数据上方。我通过给"tr th:n -child(1)， tr td:n -child(1)"应用一个宽度来实现这一点。(每一栏)。

y-scroll and height

我们希望"head"保持在表的顶部。甚至当我们滚动的时候。因此，我们只需将其转换为块元素。

"身体"是另一回事。我们希望能够垂直滚动它。因此，我们添加了"overflow-y: auto"，并为元素设置了一个固定的高度(否则它只会下降而不滚动)。

表的总高度将是" head"answers"tbody"的高度。"桌子会调整大小以适应它。"

CSS (html与问题帖子中的相同) 

td, th {
    border-bottom:1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
}
th div{display: none;} /*why is this html even here!?!?*/
table {
    display: block;
    position: relative;
    border: 1px solid #000;   
    width: 75%;
    border-spacing: 0;
    margin: auto;
    overflow-x: auto;
}
thead{
    display: block;
    position: relative;
    width: 700px; /*total width of columns*/
}
tbody{
    display: block;
    position: relative;
    height: 250px;
    overflow-y: auto;
    width: 700px; /*total width of columns.*/
}
tr th:nth-child(1), tr td:nth-child(1){
    width: 100px;
}
tr th:nth-child(2), tr td:nth-child(2){
    width: 150px;
}
tr th:nth-child(3), tr td:nth-child(3){
    width: 450px;
}

PS:我猜这就是你想问的。

相关文章：