使用CSS使页眉变粘并滚动正文

Question

我已经尝试过这种方法的多个版本，但我总是回到标头在滚动时扩展大小，或者th和td单元的宽度不同。有关完整的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”列会根据其中写入的单词的百分比大小来调整其大小。 “百分比”用于定义包含块的宽度。所以在行号小提琴中给定的“ 33”根据需要更改以像素为单位的宽度。尝试使用以下更正。它解决了不一致问题。

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

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

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

使整个表格的宽度与内容的4列相同：

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

解决方案：只需除去display：block和float：left并且不要将宽度固定为100px。