javascript - 我需要卡住 html 表格中的顶行

Question

enter image description here [![在此处输入图片描述][2]][2]

我已经为包含子 ID 的表格编写了 html 代码，现在我需要卡住唯一的标题并滚动数据(如果我应用的样式与分隔每一列的行不匹配)。

当我尝试卡住第一行时，请参阅我所附的图片，它已经声明了一定的宽度，但现在它正在压缩宽度。

实际上它看起来像 pic2 如果我尝试这样做它会变得像 pic1 任何人都可以建议我最好的解决方案 这些不会卡住标题，因为它被声明为单个表。

[在此处输入图片描述][2]

enter image description here

Answer 1

试试这个 CSS:

table {
  width: 100%;
}
thead, tbody, tr, td, th {
  display: block;
}
tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}
tbody {
  height: 120px; /* Change this with your needs. */
  overflow-y: auto;
}
tbody td, thead th {
  width: 19.2%; /*If 5 columns then 19.2*/
  float: left;
}

https://jsfiddle.net/4aazdqbc/2/