HTML 单元格外出现边框

Question

这里是fiddle：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>

现在很简单table，但是，我想不通的是如何让单元格1、3的边框不延伸到底部，因为我需要space单元格 3、4 下方为无边框。

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

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

谢谢。

Answer 1

只是不要使用 rowspan...如果可能的话。

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 规则。
使用此规则，相邻 table 个单元格（td 或 th）共享一个边框。使用跨单元格（cellspan 和 rowspan），您甚至可以让两个以上的单元格共享一个边框，即有两个边框，可以彼此重叠。

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

这是 CSS Level 2 (Tables)

的规范

The following rules determine which border style "wins" in case of a conflict:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)

If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.

If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

这个例子说明了 table 边框的一些怪癖。
有两个相同的 table，唯一的区别是 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 一样。不要使用跨越单元格。如果您只有跨越空单元格，这很容易，但是跨越包含内容的单元格呢？此示例显示：

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>

HTML 单元格外出现边框

HTML Border Appearing Outside of Cell

html

css

html-table

border