Таблица CSS с фиксированной шириной столбца и максимальной высотой - PullRequest
Новая
       46

Таблица CSS с фиксированной шириной столбца и максимальной высотой

2 голосов
/ 10 марта 2019

Я пытаюсь создать таблицу с фиксированной шириной столбца, а также с фиксированной максимальной высотой, которая выходит за пределы максимальной высоты.

Читая, я бы использовал table-layout: fixed и указывал ширину столбцов для выполнения первой задачи. Я бы установил max-height, overflow: auto и display: block на столе, чтобы выполнить второе.

Однако, похоже, они не работают вместе. Столбцы составляют примерно половину предполагаемой ширины.

Моя попытка: https://jsfiddle.net/d3y5g9fq/ 

<table>
<colgroup>
  <col style="width: 30%">
  <col style="width: 50%">
  <col style="width: 20%">
</colgroup>
<thead>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

table {
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;
}

1 Ответ

2 голосов
/ 10 марта 2019

Если вы измените ширину столбца с процентов на ширину области просмотра (vw), он должен работать как задумано, но не совсем так, как ожидалось.Размеры окна просмотра должны соответствовать его размеру в соответствии с размером полного окна просмотра, но если вы оберните его в div с width в 70%, в этом сценарии он будет работать как процент вместо vw.

Использование vw с родителем width 100%: 

table {
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;
}

p {
  background-color: blue;
  width: 100%;
}

table, td, th {
  text-align: center;
  border: 1px solid black;
}
<p>Hi! </p>
<table>
<colgroup>
  <col style="width: 30vw">
  <col style="width: 50vw">
  <col style="width: 20vw">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

Использование vw с родителем width 70%: 

table {
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;
}

p {
  background-color: blue;
  width: 100%;
}

table, td, th {
  text-align: center;
  border: 1px solid black;
}
<p>Hi! </p>
<div style="width: 70%">
<table>
<colgroup>
  <col style="width: 30vw">
  <col style="width: 50vw">
  <col style="width: 20vw">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<div>

Не совсем то, что вы ожидаете ... почему?Существует очень небольшое количество сценариев, в которых vw и vh не работают должным образом.Я сам никогда не выяснял почему , но я бы предположил, что по какой-то причине это неверно истолковывает область просмотра как отдельный элемент.

Если вы хотите быть синтаксически корректным, вы могли бы такжеиспользуйте em вместо vw, что даст вам те же самые результаты:

Использование em с родителем width 100%: 

table {
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;
}

p {
  background-color: blue;
  width: 100%;
}

table, td, th {
  text-align: center;
  border: 1px solid black;
}
<p>Hi! </p>
<table>
<colgroup>
  <col style="width: 30em">
  <col style="width: 50em">
  <col style="width: 20em">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

Использование em с родителем width 70%: 

table {
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;
}

p {
  background-color: blue;
  width: 100%;
}

table, td, th {
  text-align: center;
  border: 1px solid black;
}
<p>Hi! </p>
<div style="width: 70%">
<table>
<colgroup>
  <col style="width: 30em">
  <col style="width: 50em">
  <col style="width: 20em">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<div>
...