Возникли проблемы с настройкой прокрутки в теле HTML-таблицы - выравнивания разрушены - PullRequest
Новая
       90

Возникли проблемы с настройкой прокрутки в теле HTML-таблицы - выравнивания разрушены

1 голос
/ 28 сентября 2019

У меня есть такая таблица: 

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, я наконец нашел что-то, что работает, но не идеально.Другие рекомендовали использовать style='display:block;height:100px;overflow:auto; для tbody и style='display:table;table-layout:fixed;' для tr с.Когда я это делаю, полоса прокрутки показывается и может использоваться, но внезапно все ячейки тянутся вправо от tbody (я использую настройки RTL), и это выглядит так: enter image description here, которыйэто не круто!Фактически ячейки tbody больше не выровнены с ячейками thead !!!!Я действительно смущен.Я много чего перепробовал, но, похоже, не понял, что делать, чтобы решить эту проблему.

1 Ответ

2 голосов
/ 28 сентября 2019

Если ваша полоса прокрутки не изменена в любом браузере, где это возможно, ее ширина будет средней 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>

или метод среднего padding для thead: (что на самом деле является дубликатом Как установить 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;
  }
}

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.

...