CSS Гибкие заголовки таблиц - PullRequest
Новая
       137

CSS Гибкие заголовки таблиц

0 голосов
/ 07 августа 2020

У меня возникают проблемы с уменьшением ширины .rowHeader1 при изменении размера таблицы.

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

Без удаления тегов Table semanti c, возможно ли чтобы заголовки строк сгибались правильно? 

body {
    background-color: #444;
}

table {
    border: 1px solid white;
    color: white;
    width: 100%;
}

tr, th, td {
    border: 1px solid white;
}

tbody td {
    white-space: nowrap;
}

tbody th {
    display: flex;
}

:root {
    --MIN-SIZE: 60px;
}

.rowHeader1 {
    flex: 1 1 var(--MIN-SIZE);
    border: 1px solid red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.rowHeader2 {
    flex: 0 0 var(--MIN-SIZE);
    border: 1px solid red;
}
<table>
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>
                <div class="rowHeader1">Row Header 1 Row Header 1</div>
                <div class="rowHeader2">RH 2</div>
            </th>
            <td>
                Some Table Data Some Table Data Some Table Data
            </td>
        </tr>
    </tbody>
</table>

1 Ответ

1 голос
/ 07 августа 2020

Если вы установите flex-shrink значение .rowHeader1 на 0 и установите его ширину равной 60 пикселей, он будет увеличиваться, чтобы заполнить пространство, но не сжимается меньше 60 пикселей: 

body {
  background-color: #444;
}

table {
  border: 1px solid white;
  color: white;
  width: 100%;
}

tr,
th,
td {
  border: 1px solid white;
}

tbody td {
  white-space: nowrap;
}

tbody th {
  display: flex;
}

:root {
  --MIN-SIZE: 60px;
}

.rowHeader1 {
  flex: 1 0 var(--MIN-SIZE);
  width: 60px;
  border: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.rowHeader2 {
  flex: 0 0 var(--MIN-SIZE);
  border: 1px solid red;
}
<table>
  <thead>
    <tr>
      <th>Column Header</th>
      <th>Data</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <div class="rowHeader1">Row Header 1 Row Header 1</div>
        <div class="rowHeader2">RH 2</div>
      </th>
      <td>
        Some Table Data Some Table Data Some Table Data
      </td>
    </tr>
  </tbody>
</table>
...