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

标签 javascript html css html-table scrollbar

我有一个这样的表:

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>

一切正常，我的表看起来像 this image .

当我想为该表的 tbody 使用垂直滚动条时，问题就出现了。

通过大量的搜索，主要是在 SO 中，我终于找到了一些可行但不完美的东西。其他人建议对 tbody 和 style='display:table;table-layout 使用 style='display:block;height:100px;overflow:auto;: fixed;' 用于 tr。当我这样做时，滚动条显示并可用，但突然所有单元格都被拉到 tbody 的右侧(我正在使用 RTL 设置)，它看起来像这个图像:enter image description here这不酷! 事实上，tbody 的单元格不再与 thead 中的单元格对齐!!!! 我真的很困惑。我已经尝试了很多东西，但似乎没有弄清楚该怎么做才能解决这个问题。

最佳答案

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

然后您可以根据此宽度设置 thead 样式，并设置 padding 或将 thead 设置为 block带有一个 scrollbar，它通过 overflow-x:scroll 完美匹配它自己的宽度。

带有 overflow-x:scroll 的选项用于 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>

或 thead 上的平均 padding 方法:(实际上是 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。

关于javascript - 在 html 表的 tbody 中设置滚动时出现问题 - 对齐被破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58149767/

上一篇：javascript - 如何在 expressjs 中调用多个文件 .pug？

下一篇：javascript - 如何获取具有特定样式属性值的循环中元素的长度

相关文章：

javascript - 使用助手: 'original' with sortable() and draggable() doesn't appear to work

html - 一些html+css代码让所有页面都移位

html - 如何为某些输入设置 "clear fields"链接

javascript - slider 设置功能

javascript - 在另一个元素的子元素下方绘制元素

javascript - 单击功能替换div id

javascript - Flash 内容仅适用于 Firefox

javascript - 如何以递归方式将 XML 列表显示为以前的 ASP :MENU did?

javascript - Mosync Javascript NativeUI 编辑框作为密码字段

html - 模糊除悬停之外的所有内容

©2024 IT工具网  联系我们