Таблица форматирования неисправностей - PullRequest
Новая
       6

Таблица форматирования неисправностей

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

Я пытаюсь отформатировать таблицу и по какой-то причине не могу понять, что переполнение <tbody> не работает должным образом (вообще):

Использование следующего CSS: 

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}

Тело таблицы сдвинуло нижний колонтитул и не показывает полосу прокрутки.

Я поставил свою скрипку здесь . Хотелось бы получить немного понимания.

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Здесь ya go, с некоторой очищенной семантикой и упрощенным использованием хорошей старой модели коробки. Хороших выходных! 

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.header,
.footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}

.content {
  background-color: violet;
}

.data-grid {
  max-height: 200px;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.data-grid th:not(:first-child), .data-grid td:not(:first-child) {
  border-left: gray 1px solid;
}

.data-grid thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: lightblue;
  width: calc(100% - 17px); /* Average scrollbar width to keep columns aligned + border width */
}

.data-grid tbody tr {
  display:table;
  width:100%;
  table-layout:fixed
}

.data-grid tbody {
  display: block;
  height: 200px;
  width: 100%;  
  overflow-y: scroll;
  overflow-x: hidden;
}
<div class="header">Table Header Here</div>
<div class="content">
  <table class="data-grid">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer">Table Footer Here</div>
0 голосов
/ 17 января 2020

Переместите эти три стиля из ваших .outside стилей в ваши .data-grid стили: 

  height: 200px;
  display: flex;
  flex-flow: column;

Вот код с этими изменениями: 

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  height: 200px;
  display: flex;
  flex-flow: column;
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}
<div class="outside">
  <div class="header">Table Header Here</div>
  <div class="content">
    <table class="data-grid">
      <thead>
        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class=footer>Table Footer Here</div>
</div>

(Запустите приведенный выше фрагмент и разверните его в полноэкранном режиме, чтобы исключить дополнительную полосу прокрутки, вызванную небольшим окном stackoverflow)

...