Как добавить полосу прокрутки только к телу и не исправить thead - PullRequest
Новая
       6

Как добавить полосу прокрутки только к телу и не исправить thead

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

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

Однако, это не совсем то, что я хотел бы. Я хочу, чтобы полоса прокрутки начиналась там, где начинается <tbody>. Я попытался сделать это, добавив 

height: 546px;
max-height: 546px;
overflow-y: scroll; /* only Y axis scroll */

к <tbody> и удалив его из #tasks-table-wrapper. Я также сделал <tbody> и <tr> display: block;

Вот результат https://jsfiddle.net/4gLwp697/3/. Проблема в том, что <thead> не совпадает с <tbody>. Я могу исправить это, указав ширину столбцов, но я хочу, чтобы они были автоматически.

Как это исправить?

Ответы [ 2 ]

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

рассмотрите этот фрагмент кода, нет прямого решения вашей проблемы, это определяется функцией «таблица». Решения для текущих основных сред следующие: вам нужно установить ширину «столбцов». 

* {
  margin: 0;
  padding: 0;
}

#content {
  overflow: hidden;
  height: 100%;
  text-align: center;
}

#tasks-table-wrapper {
  text-align: left;
  display: inline-block;
  width: auto;
}
.scrollbar-wrap {
  overflow: auto;
  height: 100px;
}
.black-table {
  border-collapse: separate;
  font-size: 0;
  background-color: #121212;
  text-transform: uppercase;
  border-spacing: 0;
}

.black-table td {
  color: #bbb;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 15px 30px;
}
.black-table th {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 15px 25px;
  border-bottom: 1px solid #1c1c1c;
  position: sticky; /* keep TH on top */
  top: 0;
  background-color: #121212;
  white-space: nowrap;
}
<div id="content">
  <div id="tasks-table-wrapper">
    <table class="black-table">
        <colgroup>
          <col width="180">
          <col width="180">
          <col width="180">
          <col width="180">
        </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
    </table>
    <div class="scrollbar-wrap">
      <table class="black-table">
        <colgroup>
          <col width="180">
          <col width="180">
          <col width="180">
          <col width="163">
        </colgroup>
        <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>
        </tbody>
      </table>
    </div>
  </div>
</div>

Вы можете увидеть VUE Таблица с фиксированным заголовком , просмотреть элементы таблицы.

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

Заменить 

#tasks tr {
  display: block;
}

на 

#tasks tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

https://jsfiddle.net/5nt18cL0/

...