After extensive experience creating html newsletter templates, I have observed that the first row in an html table can impact the positioning of subsequent rows in certain unique situations. This behavior is inherent to tabular formats and should be anticipated.
To mitigate any issues caused by applying borders to the first row or cell, it is advisable to compensate for the deficit by defining a transparent border of equal width for all cells that are not marked, like so:
tr:not(.marked) {
border-left: 5px solid transparent;
}
View 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 want to eliminate preceding whitespace in tables entirely, you may consider using a pseudo-element on the first nested table cell as a visual marker instead, as demonstrated below:
tr.marked td:first-child:before {
content: "";
position: absolute;
left: -3px;
top: 0;
bottom: 0;
background: green;
width: 5px;
}
View 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>