HTML边框显示在单元格外部

Question

这是小提琴：https://jsfiddle.net/uf23rtcs/

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>
      <td rowspan="4" class="borderless"></td>
      <td colspan="2" class="test">Cell 1, 3</td>
      <td rowspan="4" class="borderless"></td>
      <td>Cell 1, 6</td>
      <td>Cell 1, 7</td>
    </tr>
    <tr>
      <td>Cell 2, 1</td>
      <td>Cell 2, 3</td>
      <td>Cell 2, 4</td>
      <td>Cell 2, 6</td>
      <td rowspan="3">Cell 2, 7</td>
    </tr>
    <tr>
      <td>Cell 3, 1</td>
      <td rowspan="2">Cell 3, 3</td>
      <td>Cell 3, 4</td>
      <td rowspan="2">Cell 3, 6</td>
    </tr>
    <tr>
      <td>Cell 4, 1</td>
    </tr>
  </tbody>
</table>

现在它是一个非常简单的表，但是，我无法弄清楚如何使单元格1、3的边框不延伸到底部，因为我需要在单元格3、4下的空间无边界。 / p>

我想到的唯一解决方案是，如果我在那个位置放入另一个无边界单元格，但我还需要它没有任何表数据。我该如何解决？

当我将border-collapse设置为单独时（这是我不需要的），它似乎也可以以某种方式工作。

谢谢。

Answer 1

请不要使用rowpan ...如果可能的话。

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" class="test">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>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>

Answer 2

您可以进行以下操作：

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" rowspan="10"></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>
      <td class="borderless"></td>
      <td colspan="2" class="test">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>
      <td class="borderless"></td>
      <td>Cell 2, 3</td>
      <td>Cell 2, 4</td>
      <td class="borderless"></td>
      <td>Cell 2, 6</td>
      <td rowspan="2">Cell 2, 7</td>
    </tr>
    <tr>
      <td>Cell 3, 1</td>
      <td class="borderless"></td>
      <td rowspan="2">Cell 3, 3</td>
      <td>Cell 3, 4</td>
      <td class="borderless"></td>  
      <td>Cell 3, 6</td>
    </tr>
    <tr>
      <td>Cell 4, 1</td>
    </tr>
  </tbody>
</table>

Answer 3

您的问题来自border-collapse: collapse规则。
使用此规则，相邻的表格单元格（td或th）共享边框。使用跨越单元格（cellspan和rowspan），您甚至可以拥有两个以上的单元格共享一个边界，即有两个边界可以彼此重叠。

现在有一个优先级，即在特定边框上使用该单元格的样式和颜色。 其中包括样式（实心拍点虚线拍点），边框宽度（更大的拍点代表较低的宽度）和HTML源代码中单元格的顺序（早期的单元格胜过后面的单元格）

这是CSS Level 2 (Tables)

中的相应规范

  

以下规则确定在发生冲突时哪种边框样式“获胜”：

     

  

• 边界样式为“隐藏”的边界优先于所有其他冲突边界。具有此值的任何边界都会隐藏此位置的所有边界。

  

• 样式为“无”的边框的优先级最低。只有在此边缘相遇的所有元素的边框属性为“无”时，边框才会被忽略（但请注意，边框样式的默认值为“无”。）

  
• 如果没有一种样式是“隐藏的”并且至少其中一种不是“没有”的，那么将舍弃窄边框，而推荐宽边框。如果有多个具有相同的“边框宽度”，则首选按以下顺序排列的样式：“双”，“实”，“虚线”，“点缀”，“山脊”，“起点”，“凹槽”和最低的样式： “插入”。
  
• 如果边框样式仅在颜色上有所不同，则在单元格上设置的样式将胜过一行，从而胜过行组，列，列组以及最后的表格。当两个相同类型的元素发生冲突时，则向左移一个（如果表的“方向”为“ 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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>

如何预防您的问题？就像做Daniil already said一样。不要使用生成单元格。如果您仅具有跨越空单元格，但是跨越具有内容的跨越单元格呢，这很容易。此示例显示：

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>