Таблица, которая занимает всю ширину, даже если столбцы не - PullRequest
Новая
       22

Таблица, которая занимает всю ширину, даже если столбцы не

2 голосов
/ 04 июля 2019

У меня есть такая HTML-таблица: 

table { border-collapse: collapse; }

table thead th:nth-child(1) { width: 180px }
table thead th:nth-child(2) { width: 150px }
table thead th:nth-child(3) { width: 170px }

table thead tr { border-bottom:2px solid #222; }
table tbody tr { border-top:1px solid #ddd; }
table tbody tr:hover { background: #def; }

table tbody td { height: 40px; }
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
      </tr>
    </tbody>
  </table>
</div>

Столбцы будут иметь разные фиксированные значения ширины, указанные в CSS, которые будут определять размер таблицы. В приведенном выше примере столбцы имеют размер 180px, 150px и 170px соответственно, поэтому таблица будет иметь ширину 500px.

Из-за дизайна нам нужно, чтобы таблица занимала 100% контейнера без изменения размера столбцов . Это означает, что, например, если экран имеет размер 900px, столбцы по-прежнему занимают свои 500px, но таблица должна растягиваться до конца контейнера, чтобы занять оставшиеся 400px.

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

Одной из опций hacky будет добавление псевдоэлемента, занимающего всю ширину страницы (с обтеканием div, имеющим overflow: hidden, как в демонстрационном примере ниже). Но проблема с этим решением заключается в том, что если в таблице есть столбцы, которые занимают больше ширины страницы, мы хотим, чтобы содержащая div прокручивалась, но тогда мы увидим нечто, похожее на огромную пустую строку. 

table { border-collapse: collapse; }

table thead th:nth-child(1),
table thead th:nth-child(1) { min-width: 180px }
table thead th:nth-child(2) { min-width: 150px }
table thead th:nth-child(3) { min-width: 170px }

table thead tr { border-bottom:2px solid #222; }
table tbody tr:not(:first-child) { border-top:1px solid #ddd; }
table tbody tr:hover { background: #def; }

table tbody td { height: 40px; }

div {
  overflow: hidden;
}
table tr::after {
  content: "";
  display: block;
  width: 100vw;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
      </tr>
    </tbody>
  </table>
</div>

Есть ли доступный способ, чтобы таблица занимала всю ширину, а столбцы только их выделенную ширину?

Ответы [ 3 ]

1 голос
/ 04 июля 2019

Я предлагаю изменить ширину третьего столбца на width: auto, выровнять по левому краю содержимое заголовков таблицы (th) и установить для таблицы width значение 100%. Это растянет третий столбец к правой границе страницы.

Чтобы содержимое третьего столбца не превышало 170 пикселей, вы можете добавить padding-right: calc(100% - 500px); к правилу для третьего столбца: 

table {
  border-collapse: collapse;
  width: 100%;
}

table thead th:nth-child(1) {
  width: 180px
}

table thead th:nth-child(2) {
  width: 150px
}

table thead th:nth-child(3),
table tbody td:nth-child(3){
  width: auto;
  padding-right: calc(100% - 500px);
}

table thead tr {
  border-bottom: 2px solid #222;
}

table tbody tr {
  border-top: 1px solid #ddd;
}

table tbody tr:hover {
  background: #def;
}

table tbody td {
  height: 40px;
}

th {
  text-align: left;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3 lots of content lots of content lots of content </td>
      </tr>
    </tbody>
  </table>
</div>
1 голос
/ 04 июля 2019

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

Просто обратите внимание на расчет, если хотите получить точный результат: 

table {
  border-collapse: collapse;
}

table thead th:nth-child(1),
table thead th:nth-child(1) {
  min-width: 180px
}

table thead th:nth-child(2) {
  min-width: 150px
}

table thead th:nth-child(3),
table tr td:nth-child(3){
  width: 100%;
  min-width:170px;
  /*2x2px + 1px is for the default border-spacing*/
  padding-right:calc(100% - 150px - 180px - 170px - (2*2px + 1px)); 
}

table thead tr {
  border-bottom: 2px solid #222;
}

table tbody tr:not(:first-child) {
  border-top: 1px solid #ddd;
}

table tbody tr:hover {
  background: #def;
}

table tbody td {
  height: 40px;
}

div {
  overflow: hidden;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1 with very long word here</td>
        <td>Content 3 2</td>
        <td>Content 3 3 with very long word here</td>
      </tr>
    </tbody>
  </table>
</div>

Та же идея с разными значениями: 

table {
  border-collapse: collapse;
}

table thead th:nth-child(1),
table thead th:nth-child(1) {
  width: 180px
}

table thead th:nth-child(2) {
  width: 150px
}

table thead th:nth-child(3),
table tr td:nth-child(3){
  width: calc(100% - 150px - 180px - 2*2px);
  min-width:170px;
  /*3x2px + 1px is for the default border-spacing*/
  padding-right:calc(100% - 150px - 180px - 170px - (2*2px + 1px)); 
}

table thead tr {
  border-bottom: 2px solid #222;
}

table tbody tr:not(:first-child) {
  border-top: 1px solid #ddd;
}

table tbody tr:hover {
  background: #def;
}

table tbody td {
  height: 40px;
}

div {
  overflow: hidden;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
      </tr>
      <tr>
        <td>Content 3 1 with very long word here</td>
        <td>Content 3 2</td>
        <td>Content 3 3 with very long word here</td>
      </tr>
    </tbody>
  </table>
</div>
0 голосов
/ 04 июля 2019

Решение, которое мы выбрали, было, пожалуй, самым простым: добавить дополнительный пустой столбец, который не имеет определенной ширины, будет растягиваться и расширяться, чтобы заполнить оставшееся пространство -... идобавление aria-ignore="true" к ячейкам в этом столбце.

Все еще немного хаки , но после тестирования в Chrome (с VoiceOver и ChromeVox), Firefox (с NVDA) и Internet Explorer 11(с NVDA и JAWS) все средства чтения с экрана игнорируют эту ячейку (пользователи не могут перейти к ней с помощью клавиатуры) до такой степени, что они даже не учитываются при подсчете столбцов (читатели будут читать «Вход / выход из таблицы с четырьмя строками»и 3 столбца ").

Вот код: 

table { border-collapse: collapse; }

table thead th:nth-child(1) { width: 180px }
table thead th:nth-child(2) { width: 150px }
table thead th:nth-child(3) { width: 170px }

table thead tr { border-bottom:2px solid #222; }
table tbody tr { border-top:1px solid #ddd; }
table tbody tr:hover { background: #def; }

table tbody td { height: 40px; }

table {
  width: 100%;
  table-layout: fixed;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th aria-hidden="true"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1 1</td>
        <td>Content 1 2</td>
        <td>Content 1 3</td>
        <td aria-hidden="true"></td>
      </tr>
      <tr>
        <td>Content 2 1</td>
        <td>Content 2 2<br>Line 2<br>Line 3<br>Line 4</td>
        <td>Content 2 3</td>
        <td aria-hidden="true"></td>
      </tr>
      <tr>
        <td>Content 3 1</td>
        <td>Content 3 2</td>
        <td>Content 3 3</td>
        <td aria-hidden="true"></td>
      </tr>
    </tbody>
  </table>
</div>
...