HTML边框显示在单元格外部

时间:2019-02-25 13:43:15

标签: html css html-table border

这是小提琴: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设置为单独时(这是我不需要的),它似乎也可以以某种方式工作。

谢谢。

3 个答案:

答案 0 :(得分:3)

请不要使用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>

答案 1 :(得分: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>

答案 2 :(得分:0)

您的问题来自border-collapse: collapse规则。
使用此规则,相邻的表格单元格(tdth)共享边框。使用跨越单元格(cellspanrowspan),您甚至可以拥有两个以上的单元格共享一个边界,即有两个边界可以彼此重叠。

现在有一个优先级,即在特定边框上使用该单元格的样式和颜色。 其中包括样式(实心拍点虚线拍点),边框宽度(更大的拍点代表较低的宽度)和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>