HTML边框出现在单元格之外

问题描述 投票：2回答：3

这是小提琴：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>

现在它是一个相当简单的表，然而，我无法弄清楚的是如何使Cell 1,3的边界不延伸到底部，因为我需要Cell 3,4下面的空间是无边框的。

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

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

谢谢。

html css html-table border
3个回答
3
投票

只是不要使用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>
0
投票

你可以做这样的事情：

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>
0
投票

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

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

这是CSS Level 2 (Tables)的相应规格

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

  • 具有“隐藏”边界风格的边界优先于所有其他冲突边界。具有此值的任何边框都会抑制此位置的所有边框。
  • 风格为“无”的边框优先级最低。仅当在此边缘处遇到的所有元素的边界属性为“none”时，才会省略边框（但请注意，“none”是边框样式的默认值。）
  • 如果没有一个样式是“隐藏的”并且其中至少有一个不是“无”，那么将丢弃窄边框以支持更宽的样式。如果有几个具有相同的'border-width'，则按此顺序首选样式：'double'，'solid'，'dashed'，'dotted'，'ridge'，'outset'，'groove'和最低： “插页”。
  • 如果边框样式仅在颜色上有所不同，那么在单元格上设置的样式将赢得一行中的一个样式，该样式将胜过行组，列，列组，最后是表格。当两个相同类型的元素发生冲突时，那么左边的那个元素（如果表格的'方向'是'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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.