Как сохранить ширину thead и tbody на 100%, используя показ блока - PullRequest
Новая
       33

Как сохранить ширину thead и tbody на 100%, используя показ блока

0 голосов
/ 21 октября 2018

Итак, у меня есть HTML-таблица с thead и tbody.Я хотел бы иметь часть тела таблицы для прокрутки, сохраняя при этом часть заголовка, где она находится.Я нашел решение этой проблемы, используя thead и tbody в качестве отображения блока, однако, как только я это сделаю, контент будет сдвигаться влево, а не растягиваться по всей таблице.Полоса прокрутки находится там, где она должна быть (полностью справа), но содержимое разбивается, и тогда данные таблицы не совпадают с заголовками.Если я уберу display: block с thead и tbody, все выстроится идеально, но я не могу отобразить полосу прокрутки.Любые предложения?

Это мой полный код.Если вы вытащите блок display: thead и tbody, он должен выглядеть так (хотя бы по ширине и выравниванию) 

table {
  width:800px;
  margin-top:30px;
  margin-bottom:30px;
  border-collapse:collapse;
}

th {
  background-color:rgb(216,191,216);
  text-align:center;
  margin:0px;
}

td {
  text-align:center;
  border-bottom:1px dashed black;
  padding-top:5px;
  padding-bottom:5px;
}

.tableHeading {
  font-size:25px;
}

.leftBorder {
  border-left:1px dashed black;
}

.rightBorder {
  border-right:1px dashed black;
}

thead {
  display:block;
}

tbody {
  display:block;
  overflow-y:auto;
  max-height:100px;
}
<div class='center'>
  <table>
      <thead>
      <tr><th colspan="5" class='tableHeading'>Receipts</th></tr>
      <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Date</th>
          <th>Category</th>
          <th>Comment</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>One</td>
          <td>1</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Two</td>
          <td>2</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Three</td>
          <td>3</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Four</td>
          <td>4</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Five</td>
          <td>5</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      </table>
  </div>
...