Прокручиваемая таблица с автоматическими c ширинами столбцов - PullRequest
Новая
       6

Прокручиваемая таблица с автоматическими c ширинами столбцов

0 голосов
/ 15 января 2020

Я пытаюсь сделать таблицу с прокручиваемой <tbody> и фиксированной <thead>.

Я пытался сделать это здесь https://jsfiddle.net/ghnfzwm6/11/. Однако, как вы можете видеть, <thead> не совпадает с <tbody>. Кроме того, колесо прокрутки полностью вправо, в то время как я хотел бы, чтобы оно находилось прямо рядом с таблицей.

Кто-нибудь знает, как я могу это исправить, не задавая фиксированную ширину столбцов?

РЕДАКТИРОВАТЬ: Кроме того, top: 0; перемещает <thead> в начало моей страницы, что нормально на скрипке, но не нормально. Однако без него есть небольшой разрыв ...

EDIT2: Я нашел это решение https://jsfiddle.net/uo5v0cfw/11/. Однако проблема в том, что крайний правый столбец отрезан полосой прокрутки. Это можно исправить, изменив overflow-x на auto, но я не хочу прокручивать по горизонтали ...

Ответы [ 6 ]

1 голос
/ 15 января 2020

Css для #content div не требуется. Этого css достаточно для вашего прокручиваемого стола. Я добавил некоторые комментарии в css ниже.

обновление: добавлено минимум css для мобильной поддержки 

#content {
}
#tasks-table-wrapper {
  width: 800px; /* or use % for the width */
  height: 546px;
  max-height: 546px;
  margin: 0 auto;
  overflow-y: scroll; /* only Y axis scroll */
}
#tasks-table-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* keep content in a TD cell */
}
#tasks {
  border-collapse: collapse; 
  font-size: 0;
}
#tasks, #tasks thead, #tasks tbody, #tasks tr {
  width: 100%; /* keep all elements full width */
}
#tasks th, #tasks td {
  padding: 20px;
  text-align: left;
  background-color: #121212;
  text-transform: uppercase;
}
#tasks th {
  position: sticky; /* keep TH on top */
  top: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
#tasks td {
  color: #bbb;
  font-size: 11px;
  letter-spacing: 1px;
}

/* minimum for mobile support */
@media (max-width: 767.9px) {
  #tasks-table-wrapper {
    max-width: 100%;
  }
  #tasks {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
1 голос
/ 15 января 2020

Вы должны попробовать установить thead на position: sticky; вместо fixed. Когда элемент имеет позицию fixed или absolute, браузер не отображает его как часть своего обычного содержащего блока. Поскольку ваш thead позиционируется как fixed, он не отображается как часть этого содержащего блока, и, таким образом, ваш tbody уменьшается до размера его содержимого. Использование sticky позволит избежать этого, поскольку он предназначен для того, чтобы сохранить элемент как часть исходного содержащего блока, в то же время позволяя ему придерживаться страницы в указанном вами месте.

Обязательно проверьте поддержку браузера и полифилл при необходимости: https://caniuse.com/#feat = css -липкий

0 голосов
/ 16 января 2020

Редактировать: Если вам нужно сохранить свойства отображения таблицы, вы можете сделать что-то вроде this :

Добавить позицию, привязанную к вашим элементам th: 

#tasks-table-wrapper table#tasks th {
  padding: 20px;

  position: sticky;
  top: 0;
  background-color: #121212;
}

И удалите свойство fixed из вашего элемента thead 

#tasks-table-wrapper table#tasks thead {
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  border-collapse: collapse;
  background-color: #121212;
  text-align: left;
  /* position: fixed; */
  /* top: 0; */
}

Вы также можете изменить ширину таблицы на 100% и оболочку на нужный размер: 

#tasks-table-wrapper {
  height: 546px;
  max-height: 546px;
  overflow-y: scroll;
  width: 90%;
  margin: 0 auto;
}
#tasks-table-wrapper table#tasks {
  text-align: left;
  text-transform: uppercase;
  margin: 0 auto;
  background-color: #121212;
  font-size: 0;
  width: 100%;
}

Если вы не Не заботясь о свойствах таблицы css, изменив свойство отображения элементов таблицы на блокированное или гибкое, я сделал скрипку и ручку , надеюсь, это поможет.

0 голосов
/ 16 января 2020

Спасибо @bron за предоставление jsfiddle практически полного решения. Последний кусок должен был сделать полосу прокрутки go рядом с таблицей, которую я сделал здесь https://jsfiddle.net/ghnfzwm6/16/. 

#content {
  ...
  text-align: center;
}

#tasks-table-wrapper {
  width: auto;
  ...
  display: inline-block;
}

И убрал 

#tasks, #tasks thead, #tasks tbody, #tasks tr {
  width: 100%;
}
0 голосов
/ 15 января 2020

Попробуйте это ... добавьте position:relative; к # task-table-wrapper.

CSS код 

* {
  margin: 0;
  padding: 0;
}

#content {
  overflow: hidden;
  height: 100%;
}

#tasks-table-wrapper {
    height: 546px;
    max-height: 546px;
    width: 35%;
    overflow-y: scroll;
    position: relative;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0px);
}

#tasks-table-wrapper table#tasks {
    text-align: left;
    text-transform: uppercase;
    margin: 0 auto;
    width: 100%;
    background-color: #121212;
    font-size: 0;

}

#tasks-table-wrapper table#tasks thead {
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  border-collapse: collapse;
  background-color: #121212;
  text-align: left;

}

#tasks-table-wrapper table#tasks th {
  padding: 20px;
}

#tasks-table-wrapper table#tasks tbody {
  font-size: 11px;
  color: #bbb;
  letter-spacing: 1px;
  margin-top: 57px;
}

#tasks-table-wrapper table#tasks tbody tr td {
  padding: 20px;
}

HTML Код 

<div id="content">
  <div id="tasks-table-wrapper">
    <table id="tasks">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
         <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
      </tbody>
    </table>
  </div>
</div>
0 голосов
/ 15 января 2020

Попробуйте это. Позиция sticky в TH (лучше для кросс-браузера) и border-collapse: collapse; в TABLE. 

* {
  margin: 0;
  padding: 0;
}

#content {
  overflow: hidden;
  height: 100%;
}

#tasks-table-wrapper {
  height: 546px;
  max-height: 546px;
  overflow-y: scroll;
}


#tasks-table-wrapper table#tasks {
  text-align: left;
  text-transform: uppercase;
  margin: 0 auto;
  background-color: #121212;
  font-size: 0;
  border-collapse: collapse;
}

#tasks-table-wrapper table#tasks thead {
  font-size: 13px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  border-collapse: collapse;
  background-color: #121212;
  text-align: left;
}

#tasks-table-wrapper table#tasks thead tr {

}

#tasks-table-wrapper table#tasks th {
  padding: 20px;
  position: sticky;
  top: 0;
  border: 0;
  background-color: #121212;
}

#tasks-table-wrapper table#tasks tbody {
  font-size: 11px;
  color: #bbb;
  letter-spacing: 1px;
  margin-top: 57px;
}

#tasks-table-wrapper table#tasks tbody tr {

}

#tasks-table-wrapper table#tasks tbody tr td {
  padding: 20px;
}
<div id="content">
  <div id="tasks-table-wrapper">
    <table id="tasks">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        </tr>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
        <tr>
          <td>AAA</td>
          <td>BBB</td>
          <td>CCC</td>
          <td>DDD</td>
      </tbody>
    </table>
  </div>
</div>
...