2

Here is the 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>

Now it's a fairly simple table, however, what I can't figure out is how to make the border of Cell 1, 3 not extend to the bottom because I need the space below Cell 3, 4 to be borderless.

The only solution I came up with is if I put in another borderless cell in that spot but I also need it to be devoid of any table data. How can I fix this?

It seems to also work somehow when I have the border-collapse set to separate (which is what I don't need).

Thank you.

Improve this question
2
  • this is because you have rowspan on both side.. try a different approach to achieve it. thanks Commented Feb 25, 2019 at 13:54
  • Thank you! I got it Commented Feb 25, 2019 at 14:04

3 Answers 3

Reset to default
3

Just don't use rowspan... If it's possible.

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Ah thank you! So it's better to just manually add the gap column in each row then?
In that case you can add rowspans to second row after 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>
0

You can make something like this:

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>

Improve this answer

Comments

0

Your issue comes from the border-collapse: collapse rule.
With this rule adjacent table cells (td or th) share a border. With spanning cells (cellspan and rowspan) you can even have more than two cells sharing one border, i.e. there are two borders, which can be on top of each other.

Now there is a precedence, which cell's style and color is used on a particular border. Among those are things like the style (solid beats dashed beats dotted), the border width (bigger width beats lower width) and the order of the cell in the HTML source code (the early cell beats the later cell)

This is the according specification from 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.

This example illustrates some of the quirks of table borders.
There are two identical tables with the only difference being the border-collapse value.

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>

How to prevent your issue? Just do as Daniil already said. Don't use the spanning cells. This is easy, if you only have spanning empty cells, but what about spanning cells with content. This example shows:

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>

In this case you need to refrain from using border-collapse: collapse and stick to border-collapse: separate, which leads to new issues, especially will you need to chose the 4 borders of every cell by hand.

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.