Нарушения форматирования таблицы CSS

Question

Я работаю над заменой метода форматирования таблиц на основе Span таблицами, и я нахожусь на 90%.Учитывая это CSS

table.px_update {
  border-style: none;
  margin-bottom: 2em;
  margin-left: 2em;
  overflow: scroll;
  padding: 0;
  table-layout: fixed;
  width: 50em;
}

table.px_update th {
  border-style: none none solid none;
  padding: 0;
}

table.px_update td {
  border-style: none;
  padding: .5em 0 0 0;
  text-align: left;
  vertical-align: top;
}

table.px_update col.px_update_num {
  width: 9em;
}

table.px_update col.px_update_date {
  width: 5em;
}

table.px_update col.px_update_version {
  width: 5em;
}

table.px_update col.px_update_note {
  width: 30em;
}

<table class="px_update">
  <colgroup>
    <col class="px_update_num">
    <col class="px_update_date">
    <col class="px_update_version">
    <col class="px_update_note">
  </colgroup>
  <tbody>
    <tr>
      <th>NUMBER</th>
      <th>DATE</th>
      <th>VERSION</th>
      <th>Notes</th>
    </tr>
    <tr>
      <td>RVT 2019.1</td>
      <td>31.10.2018</td>
      <td>2019.1.122</td>
      <td>1, 2</td>
    </tr>
  </tbody>
</table>

Все великолепно с двумя исключениями.

1. В то время как столбцы Дата и Версия установлены на одинаковую ширину, сСтолбец Notes намного шире, на дисплее фактически отображаются Дата и Примечания в виде узких столбцов, а Версия намного шире.Когда я попытался удалить ширину для Notes, но, в частности, установить ширину для версии, в результате версия и Notes были на одинаковом расстоянии.Кажется странным.
2. Если я достаточно уменьшу окно браузера, таблица будет вырезана без прокрутки.Я попытался overflow:scroll!important; на столе без изменений.Я думаю, что тема Wordpress CSS вызывает проблему?Или я не правильно понимаю переполнение?

И, как примечание / вопрос, как можно получить Run Code Snippet для HTML?Кажется, это функция переполнения стека, а не ссылка на внешний сайт, но я не понимаю, как это сделать?Может быть, доступно только в качестве редактирования повелителям форматирования с высокой репутацией?

РЕДАКТИРОВАТЬ: Стоит отметить, что у меня есть некоторые унаследованные CSS на моем конце, так что мои заголовки остаются выровненными.Если заголовки здесь выровнены по левому краю, это будет выглядеть именно так, как я хочу, так что, похоже, что-то в унаследованном CSS вызывает мою проблему.Надеюсь, кто-то имеет представление о том, что.

РЕДАКТИРОВАТЬ # 2: Таким образом, проверка элементов показывает, что столбец Версия на самом деле слишком широкий, и он выделен серым цветом в инспекторе Safari.Ширина столбца «Дата» составляет 75 пикселей, а «Версия» - 232 и изменяется.Переключение с Computed на Styles Я не вижу ничего, что объясняет это.И очень странно, что с предыдущими столбцами все в порядке.

РЕДАКТИРОВАТЬ # 3: Сделал страницу только с текущим рабочим HTML на ней здесь .Надеюсь, что позволяет обзор унаследованных CSS.Я чувствую, что это SOOOO ЗАКРЫТЬ.

Answer 1

Проблема, как вы уже догадались, в дополнительном CSS в файле wp-custom-css.css.В строке 840 мы видим

.px_update_date {
  display: inline-block; 
  position: absolute; left: 7em; 
}

Таким образом, ваш второй <col> больше не считается столбцом таблицы и больше не имеет отображаемого по умолчанию значения table-column.Решение: измените его класс на другое, которое еще не используется.

Ответ на второй вопрос: таблицы не легко прокручиваются.Безусловно, самое простое решение - поместить стол в контейнер и позволить контейнеру прокручиваться.

.scrollable {overflow:auto;}

<div class="scrollable">

  <table style="width:200%; border:3px outset">
    <tr> <td>Very</td><td>wide</td><td>table</td> </tr>
  </table>
  
</div>