使用 CSS 使 header 粘滞并滚动 body

Question

我已经尝试了这个的几个版本，但我总是回到 header 随着我滚动而扩大尺寸，或者第 th 和 td 单元格的宽度不同。请参阅此 fiddle 以获得完整的 html 和 css：它滚动得很漂亮，但您会看到 th 和 td 逐渐相互不一致. https://jsfiddle.net/paul724/0gL74yd1/4/#&togetherjs=udj4PqtUOg

<table>
    <thead>
    <tr>
        <th class="th-right" >Fruit</th>
        <th class="td-left" >Colour</th>
        <th class="td-left" >Status</th>
        <th class="th-right" >Number
        <span class="up" text-align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; back to top &uarr;<span>
        </th>
    </tr>

Answer 1

你已经给出了 td 和 th 的百分比宽度。如果以百分比形式提及宽度，则 "td" 或 "th" 列会根据其中所写单词的百分比大小调整其大小。 "Percentage"用于定义包含块的宽度。
所以在行号fiddle 处给定的“33”根据需要更改宽度（以像素为单位）。尝试使用以下校正。它修复了不一致。

tbody td, thead th {
    width: 150px;
    float: left;
}

用于使页眉和页脚具有粘性。您需要添加以下 css。对于页脚，您只需将底部固定为 0。

 .th{
     position: sticky;
     top:0;
    }
.footer th{
   position: sticky;
   bottom:0;
   }

要使整个 table 与 4 列内容的宽度相同：

出现此问题是因为您通过设置 display:block 使用了块级元素。由于 100% 宽度得到固定，但在代码中 100px 宽度也被固定并且 float:left 完成，如果块内的内容超过 100px，它将继续到下一个块。

解决方法：去掉display:block和float:left即可，宽度不要固定为100px。

使用 CSS 使 header 粘滞并滚动 body

Using CSS to make header sticky and scroll body

css

scroll

header

sticky