这是小提琴: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
设置为单独时(这是我不需要的),它似乎也可以以某种方式工作。
谢谢。
答案 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
规则。
使用此规则,相邻的表格单元格(td
或th
)共享边框。使用跨越单元格(cellspan
和rowspan
),您甚至可以拥有两个以上的单元格共享一个边界,即有两个边界可以彼此重叠。
现在有一个优先级,即在特定边框上使用该单元格的样式和颜色。 其中包括样式(实心拍点虚线拍点),边框宽度(更大的拍点代表较低的宽度)和HTML源代码中单元格的顺序(早期的单元格胜过后面的单元格)
中的相应规范以下规则确定在发生冲突时哪种边框样式“获胜”:
边界样式为“隐藏”的边界优先于所有其他冲突边界。具有此值的任何边界都会隐藏此位置的所有边界。
样式为“无”的边框的优先级最低。只有在此边缘相遇的所有元素的边框属性为“无”时,边框才会被忽略(但请注意,边框样式的默认值为“无”。)
- 如果没有一种样式是“隐藏的”并且至少其中一种不是“没有”的,那么将舍弃窄边框,而推荐宽边框。如果有多个具有相同的“边框宽度”,则首选按以下顺序排列的样式:“双”,“实”,“虚线”,“点缀”,“山脊”,“起点”,“凹槽”和最低的样式: “插入”。
- 如果边框样式仅在颜色上有所不同,则在单元格上设置的样式将胜过一行,从而胜过行组,列,列组以及最后的表格。当两个相同类型的元素发生冲突时,则向左移一个(如果表的“方向”为“ 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>
<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>