时间戳

首页 > 解决方案 > 在 html 表格的 tbody 中设置滚动时出现问题 - 对齐被破坏

javascript - 在 html 表格的 tbody 中设置滚动时出现问题 - 对齐被破坏

问题描述

我有一张这样的桌子：

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial">
  <thead>
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

一切正常，我的桌子看起来像这个图片。

当我想tbody为此表使用垂直滚动条时，问题就开始了。

从 SO 中的大量搜索中，我终于找到了一些可行但不完美的东西。其他人建议使用style='display:block;height:100px;overflow:auto;fortbody和style='display:table;table-layout:fixed;'for trs。当我这样做时，滚动条显示并且可用，但突然所有单元格都被拉到tbody（我正在使用 RTL 设置）的右侧，它看起来像这个图像：在此处输入图像描述这不酷！事实上， 的单元格tbody不再与thead!!!!中的单元格对齐 我真的很困惑。我已经尝试了很多东西，但似乎不知道该怎么做才能解决这个问题。

标签： javascripthtmlcsshtml-tablescrollbar

解决方案

如果您的滚动条没有在任何可能的浏览器中重新设置样式，则它的宽度是平均的1.1rem

然后，您可以thead考虑这个宽度的样式，并设置 apadding或设置thead为 a block，scrollbar它与它自己的宽度完全匹配overflow-x:scroll。

带有overflow-x:scrollfor 的选项thead 

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style=" overflow-y:scroll;display:block;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

或上的平均padding方法thead：（实际上是How to set tbody height with overflow scroll的副本）

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style="padding-right:1.1rem;display:table;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

还有display:grid+display:contents选项或包装器和position:sticky. 如果所有这些 CSS 选项似乎都不够好，最后一个选项是在 javascript 上中继。

推荐阅读