Таблицы: при добавлении границы ячейки расширяются

Question

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

Похоже, что ячейки с границей получают большую ширину, чем другие ячейки.Кроме того, ячейки с более толстой рамкой становятся шире, чем ячейки с тонкой рамкой.

Вот код, показывающий, что происходит.Зеленые ячейки - это ячейки с border-left, а красные и синие ячейки не имеют правой или левой границы.

<table style="width: 500px; height: 1000px; border-spacing: 0; background-color: gray;">
  <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>

</table>

В случае, если это проблема, связанная с браузером, вот снимок экрана Chrome 66 в Mac OS X High Sierra.

Я подтвердил в других браузерах, и то же самое происходит:

• Safari 11.1
• Opera 52
• Firefox 57

Мой вопрос: Что вызывает это и Как это исправить? Обратите внимание, что в моем реальном коде у меня есть границы различной толщины.

Answer 1

У меня была такая же проблема, пока я не указал произвольно 10% для всех TD

, очевидно, это происходит, когда вообще не указан размер.

Answer 2

Я не совсем уверен, что является причиной этого, но у меня есть обходной путь.

Добавьте прозрачную рамку вокруг всех ячеек (используйте !important):

td { border: 1px solid transparent !important; }

тогда вы 'Также мне придется добавить !important к каждой отдельной ячейке, к которой вы добавляете границу.

<td style="background-color: green; 
    border-left: white solid 1px !important; 
    border-top: white solid 1px !important;">
</td>

Я пытался добавить box-sizing, чтобы исправить / понять, что происходит, но, похоже, это не дало эффекта.На общий размер таблицы могут влиять добавленные границы;вам придется это проверить.