Border of single th spreads to neighboring th when colspan set on td row below
- by Samuel Hapak
Having following html code:
<table>
<tr><th>First</th><th class='second'>Second</th><th class='third'>Third</th><th>Fourth</th></tr>
<tr><td>Mike</td><td colspan=2 >John</td><td>Paul</td></tr>
</table>?
And following css:
table {
border-collapse: collapse;
}
td, th {
border: 1px black solid;
}
td {
border-top: none;
}
th {
border-bottom: none;
}
th.second {
border-bottom: 3px green solid;
}
th.third {
}
?
I would expect as result one table with 3px solid green line below the second th cell.
Instead of that in Chrome, I have solid green border below both the second and the third th cell.
In the firefox, results are just as expected. Is this browser bug, or my code is illegal?
You can see example at http://jsfiddle.net/tt6aP/3/
PS: Try to set
th.third {
border-bottom: 2px solid red;
}
And then try to raise it to 3px. This is even more strange.
Screenshots
Expected:
Chrome:
Firefox:
