Подтвердить что ты не робот

Ошибка Chrome с colspan и границей?

В приведенном ниже примере на верхней части правой ячейки есть граница. Он появляется только в Chrome, это ошибка Chrome?

HTML/CSS

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td>right</td>
  </tr>
</table>

Ответ 1

Кажется, что такая же ошибка указанная здесь (или аналогичная)

В основе этого ответа лежит легкое обходное решение.

Это релевантный комментарий в этом отчете об ошибке:

Это известная (старая) проблема в нашем табличном коде. Свертывание границ определяется на основе смежных ячеек, и наш код не работает правильно с охватывающими ячейками (мы рассматриваем только ячейку, примыкающую к первой строке /column в строке/столбце). Кроме того, наша граница гранулярность определяется пролетом ячейки.

Чтобы исправить эту ошибку, нам нужно будет пересмотреть наш коллапсирующий пограничный код, что является большим делом.

Вот пример, который подчеркивает ту же проблему:

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}
.right {
  border-top: double 20px #F00;
}

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td class="right">right</td>
  </tr>
</table>

Ответ 2

Поскольку Chrome-Bug позволяет придумать обходной путь. До сих пор я только придумал тот, который включает в себя изменение html:

http://jsfiddle.net/5366whmf/24/

Он добавляет еще одну строку:

<table style="border-collapse: collapse">
 <tr><td colspan=2>top</td></tr>
 <tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
 <tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>