Table inconsistent behavior for rows left-border - html

Question

I have a table where the user can set a marker on a specific line, the marker is a 5px border at the row's left border.
When I set the border at the first row the table is padded right by a few pixels, but if I set the border in another row and not the first, the table isn't padded.
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
Is this the expected behavior? If it is, how can I fix it? I tested on Firefox and Chrome and both of them behave the same way.
Fiddle: https://jsfiddle.net/2hwuq8ed/

Answer 1

Although I couldn't find any specific documentation to corroborate this, based on what I know of html tables, through practical experience (many hours of building html newsletter templates mostly), the first row can effect the positioning of any row which follows under unique situations such as these. This is due to the nature of tabular formats and could be considered expected behaviour.
Consider offsetting the deficit, created by applying the border property to the first row or cell, by declaring a transparent border of the same width for all cells which are not .marked, e.g:
tr:not(.marked) {
border-left: 5px solid transparent;
}
Updated JSFiddle
table {
border-collapse: collapse;
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked {
border-left: 5px solid green;
}
tr:not(.marked) {
border-left: 5px solid transparent;
}
td:first-child {
width: 100px;
}
td {
width: 50px;
}
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
If you need to rid tables of that preceding whitespace altogether, consider applying the visual marker to a pseudo-element of the first nested table cell instead, e.g:
tr.marked td:first-child:before {
content: "";
position: absolute;
left: -3px;
top: 0;
bottom: 0;
background: green;
width: 5px;
}
Updated JSFiddle
table {
border-collapse: collapse;
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked td:first-child:before { /* additional */
content: "";
position: absolute;
left: -3px;
top: 0;
bottom: 0;
background: green;
width: 5px;
}
td:first-child {
width: 100px;
position: relative; /* required for absolutely positioned pseudo-elements */
}
td {
width: 50px;
}
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>

Answer 2

Remove border-collapse and add cellspacing="0" cellpadding="0"
td{
border:none
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked {
border-left: 5px solid green;
}
td:first-child {
width: 100px;
}
td {
width: 50px;
}
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>