Широкая таблица в прокручиваемом автоматическом div с flex, пропускает некоторые стили тегов col - PullRequest
Новая
       15

Широкая таблица в прокручиваемом автоматическом div с flex, пропускает некоторые стили тегов col

3 голосов
/ 17 апреля 2020

Я столкнулся со странной проблемой при попытке стилизовать последние 2 столбца одной из моих широких html таблиц с использованием тегов colgroup и col.

Какие браузеры:

I протестировано на 2 браузерах на основе хрома, google chrome и opera, проблема не устранена. Но при тестировании на Mozilla Firefox проблемы вообще не было.

Проблема:

После часа отладки мне удалось обойти проблему, но я смог воспроизвести выпуск в сыром html документе. Который может быть просмотрен полностью в https://affectionate-lamport-fa8d14.netlify.app или минимальное воспроизведение можно увидеть ниже: 

table, td, tr, th, {
  white-space: nowrap;
  font-size: inherit;
  font-size: 25px;
}
th, td {
  padding: 10px 22px;
  border: 1px solid black;
}
body {
  font-size: 25px;
}
table {
  width: 100%;
}
.wrap {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.bg-warning {
  background-color: orange;
}
<div class="wrap">
<table>
  <colgroup>
    <col span="20">
    <col span="2" class="bg-warning">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">Category 1</th>
      <th colspan="2">C1</th>
      <th colspan="2">Some long name category</th>
      <th colspan="2">Category 10</th>
      <th colspan="2">klj kwjbhd ejk </th>
      <th colspan="2">Something else</th>
      <th colspan="2">Maybe something more</th>
      <th colspan="2">And so on</th>
      <th colspan="2">Something weird</th>
      <th colspan="2">Other stuff</th>
      <th colspan="2">Not done by Test Company 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
    </tr>
  </tbody>
</table>
</div>

Как видите, класс bg-warning не применяется к последнему столбцу таблицы (который имеет 2 colspan), проблема возникает только в браузеры с хромом, как упомянуто выше .

Что происходит, какой обходной путь:

Когда широкий table с width: 100% сидит внутри flex-column и scroll auto div его ширина ограничена размером экрана, даже если отображается полная таблица, и при прокрутке мы видим всю таблицу.

Эта проблема не заметна обычно, но если я пытаюсь применить некоторые css стилей / класс к последним 2 столбцам с чем-то вроде: 

<colgroup>
  <col span="20">
  <col span="2" class="bg-warning">
</colgroup>

Они не применяются, мои стили применяются, если я изменяю width css свойство table от 100% до fit-content. (Ниже приведен пояснение к демонстрационной странице: https://gifyu.com/image/luCZ)

Однако есть еще кое-что, добавив его сюда просто для полноты, основная проблема, как описано выше , есть странный частичный стиль CSS, применяемый к свитку, который я не смог воспроизвести в моей демонстрации HTML. Что также исчезает, см. Рисунок ниже для некоторого понимания этого также. Вот это gif: https://gifyu.com/image/luFZ

Вопрос:

Есть ли хорошо известное объяснение этого поведения, оно, безусловно, выглядит как ошибка, если оно является ошибкой, пожалуйста, подтвердите и укажите мне, где сообщать об этих ошибках. Я бы хотел сам сообщить об этой ошибке, если это на самом деле ошибка, а не какой-то известный нам причуд.

Примечание : Достаточно ответа только на повторный пример.

...