Ваша проблема связана с правилом border-collapse: collapse.
С этим правилом соседние ячейки таблицы (td или th) имеют общую границу.С охватывающими ячейками (cellspan и rowspan) вы можете даже иметь более двух ячеек, разделяющих одну границу, то есть есть две границы, которые могут быть друг над другом.
Теперь есть приоритет, стиль и цвет ячейки которого используются на определенной границе.Среди них такие вещи, как стиль (сплошные биты, пунктирные биты, пунктир), ширина границы (большая ширина бьет меньшую ширину) и порядок ячейки в исходном коде HTML (ранняя ячейка бьет более позднюю)
Это соответствующая спецификация из CSS Уровень 2 (Таблицы)
Следующие правила определяют, какой стиль границы "выигрывает" в случае конфликта:
Границы со «скрытым» стилем границ имеют приоритет над всеми другими конфликтующими границами.Любая граница с этим значением подавляет все границы в этом месте.
Границы со стилем 'none' имеют самый низкий приоритет.Только если свойства границы всех элементов, встречающихся на этом ребре, равны «none», граница будет опущена (но учтите, что «none» является значением по умолчанию для стиля границы.)
- Если нетиз стилей являются «скрытыми» и по крайней мере один из них не является «ни одним», тогда узкие границы отбрасываются в пользу более широких.Если несколько имеют одинаковую 'border-width', тогда предпочтительны стили в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и наименьший:'inset'.
- Если стили границ различаются только по цвету, тогда набор стилей в ячейке выигрывает у одного в строке, который выигрывает у группы строк, столбцов, групп столбцов и, наконец, таблицы.Когда два элемента одного и того же типа конфликтуют, побеждает тот, кто дальше влево (если 'направление' таблицы '' ltr '; справа, если это' rtl ') и дальше к вершине.
В этом примере показаны некоторые причуды границ таблиц.
Существуют две идентичные таблицы, единственное отличие которых состоит в значении border-collapse.
table {
display: inline-table;
border-collapse: collapse;
caption-side: bottom;
}
table td {
border: 1px solid gold;
padding: 10px;
}
table td.A, table td.F {
border-style: solid;
border-color: magenta;
border-width: 1px;
}
table td.B {
border-left-style: solid;
border-left-width: 5px;
}
table td.C {
border-style: dashed;
border-width: 5px;
}
table td.H {
border-style: double;
border-width: 7px;
border-top-color: black;
}
table td.I {
border-color: green;
}
table td.D {
border-style: dotted;
border-width: 5px;
}
table td.E {
border-style: dashed;
border-width: 5px;
}
<table>
<caption>collapse</caption>
<tr>
<td class="A" rowspan="4">A</td>
<td class="B">B</td>
<td class="F" rowspan="4">F</td>
<td class="G">G</td>
</tr>
<tr>
<td class="C">C</td>
<td class="H">H</td>
</tr>
<tr>
<td class="D">D</td>
<td class="I">I</td>
</tr>
<tr>
<td class="E">E</td>
<td class="J">J</td>
</tr>
</table>
<table style="border-collapse: separate;">
<caption>separate</caption>
<tr>
<td class="A" rowspan="4">A</td>
<td class="B">B</td>
<td class="F" rowspan="4">F</td>
<td class="G">G</td>
</tr>
<tr>
<td class="C">C</td>
<td class="H">H</td>
</tr>
<tr>
<td class="D">D</td>
<td class="I">I</td>
</tr>
<tr>
<td class="E">E</td>
<td class="J">J</td>
</tr>
</table>
Как предотвратить вашу проблему?Просто сделайте, как Даниил уже сказал .Не используйте охватывающие клетки.Это легко, если у вас есть только охватывающие пустые ячейки, но как насчет охватывающих ячеек с содержимым.Этот пример показывает:
table {
margin: auto auto;
border-collapse: collapse;
}
td,
th {
vertical-align: center;
text-align: center;
border: 1px solid black;
}
.test {
border: 2px solid red;
}
.borderless {
border: none;
width: 10px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th class="borderless"></th>
<th>Header 2</th>
<th>Header 3</th>
<th class="borderless"></th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1, 1</td>
<th class="borderless"></th>
<td colspan="2">Cell 1, 3</td>
<td class="borderless"></td>
<td>Cell 1, 6</td>
<td>Cell 1, 7</td>
</tr>
<tr>
<td>Cell 2, 1</td>
<th class="borderless"></th>
<td>Cell 2, 3</td>
<td>Cell 2, 4</td>
<th class="borderless"></th>
<td class="test">Cell 2, 6</td>
<td rowspan="3">Cell 2, 7</td>
</tr>
<tr>
<td>Cell 3, 1</td>
<th class="borderless"></th>
<td rowspan="2">Cell 3, 3</td>
<td>Cell 3, 4</td>
<th class="borderless"></th>
<td rowspan="2">Cell 3, 6</td>
</tr>
<tr>
<td>Cell 4, 1</td>
<th class="borderless"></th>
</tr>
</tbody>
</table>
В этом случае вам необходимо воздержаться от использования border-collapse: collapse и придерживаться border-collapse: separate, что приводит к новым проблемам, особенно если вам нужно будет выбрать4 границы каждой ячейки от руки.
table {
margin: auto auto;
border-collapse: separate;
border-spacing: 0;
}
col.empty {
border-width: 0;
width: 10px;
}
td,
th {
vertical-align: center;
text-align: center;
/* border: 1px solid black; */
margin: -10px;
}
.bd-0-0-0-0,
.bd-1-0-0-0,
.bd-0-1-0-0,
.bd-1-1-0-0,
.bd-0-0-1-0,
.bd-1-0-1-0,
.bd-0-1-1-0,
.bd-1-1-1-0,
.bd-0-0-0-1,
.bd-1-0-0-1,
.bd-0-1-0-1,
.bd-1-1-0-1,
.bd-0-0-1-1,
.bd-1-0-1-1,
.bd-0-1-1-1,
.bd-1-1-1-1 {
border: 0 solid black;
}
.bd-0-0-0-0 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
.bd-1-0-0-0 {
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
.bd-0-1-0-0 {
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 0;
}
.bd-1-1-0-0 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 2;
border-left-width: 0;
}
.bd-0-0-1-0 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
}
.bd-1-0-1-0 {
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
}
.bd-0-1-1-0 {
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
}
.bd-1-1-1-0 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
}
.bd-0-0-0-1 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 1px;
}
.bd-1-0-0-1 {
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 1px;
}
.bd-0-1-0-1 {
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
}
.bd-1-1-0-1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 2;
border-left-width: 1px;
}
.bd-0-0-1-1 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 1px;
}
.bd-1-0-1-1 {
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 1px;
}
.bd-0-1-1-1 {
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.bd-1-1-1-1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.test {
border-color: red;
border-width: 3px;
}
<table>
<cols>
<col>
<col class="empty">
<col>
<col>
<col class="empty">
<col>
<col>
</cols>
<thead>
<tr>
<th class="bd-1-1-1-1">Header 1</th>
<th class="bd-0-0-0-0"></th>
<th class="bd-1-1-0-1">Header 2</th>
<th class="bd-1-1-0-0">Header 3</th>
<th class="bd-0-0-0-0"></th>
<th class="bd-1-0-1-1">Header 4</th>
<th class="bd-1-1-1-1">Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bd-0-1-1-1">Cell 1, 1</td>
<td class="bd-0-0-0-0" rowspan="4"></td>
<td class="bd-1-1-1-1 test" colspan="2">Cell 1, 3</td>
<td class="bd-0-0-0-0" rowspan="4"></td>
<td class="bd-0-0-0-1">Cell 1, 6</td>
<td class="bd-0-1-0-1">Cell 1, 7</td>
</tr>
<tr>
<td class="bd-0-1-1-1">Cell 2, 1</td>
<td class="bd-0-1-1-1">Cell 2, 3</td>
<td class="bd-0-1-1-0">Cell 2, 4</td>
<td class="bd-0-0-1-1 test">Cell 2, 6</td>
<td class="bd-1-1-1-1" rowspan="4">Cell 2, 7</td>
</tr>
<tr>
<td class="bd-0-1-1-1">Cell 3, 1</td>
<td class="bd-0-1-1-1" rowspan="2">Cell 3, 3</td>
<td class="bd-0-1-1-0">Cell 3, 4</td>
<td class="bd-0-0-1-1" rowspan="2">Cell 3, 6</td>
</tr>
<tr>
<td class="bd-0-1-1-1">Cell 4, 1</td>
</tr>
<tr>
<td class="bd-0-1-1-1">Cell 5, 1</td>
</tr>
</tbody>
</table>