HTML 边框出现在单元格之外答案

【问题标题】：HTML Border Appearing Outside of CellHTML 边框出现在单元格之外
【发布时间】：2019-07-18 22:32:48
【问题描述】：

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 下方的空间是无边框的。

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

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

谢谢。

【问题讨论】：

这是因为你在两边都有rowspan..尝试不同的方法来实现它。谢谢
谢谢！我明白了

标签： html css html-table border

【解决方案1】：

只是不要使用行跨度...如果可能的话。

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>

【讨论】：

啊，谢谢！那么在每一行中手动添加间隙列会更好吗？
在这种情况下，您可以在 red-border-cell-row 之后将行跨度添加到第二行：<tr> <td>Cell 2, 1</td> <th rowspan="3" class="borderless"></th> <td>Cell 2, 3</td> <td>Cell 2, 4</td> <th rowspan="3" class="borderless"></th> <td>Cell 2, 6</td> <td rowspan="3">Cell 2, 7</td> </tr>

【解决方案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>

【讨论】：

【解决方案3】：

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

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

这是来自CSS Level 2 (Tables)的相应规范

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

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

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

如果没有一种样式是“隐藏”的，并且至少有一种不是“无”，那么窄边框将被丢弃，而采用更宽的边框。如果多个具有相同的“边框宽度”，则按以下顺序首选样式：“双”、“实线”、“虚线”、“点”、“脊”、“开始”、“凹槽”和最低的： '插入'。

如果边框样式仅在颜色上有所不同，则在单元格上设置的样式会胜过在行上设置的样式，后者会胜过行组、列、列组，最后是表格。当同一类型的两个元素发生冲突时，更靠左（如果表格的'direction'是'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>

【讨论】：