CODEWITHSUNDEEP
htmlcss
MNV
MNV

Reputation: 137

Table inconsistent behavior for rows left-border

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>

enter image description here

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/

Upvotes: 0

Views: 323

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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>

Upvotes: 1

Sultan Khan
Sultan Khan

Reputation: 318

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>

Upvotes: 0

Related Questions