CODEWITHSUNDEEP
htmlcsshtml-table
budji
budji

Reputation: 290

Firefox table border issue on cells next to a rowspan

I have a table with left and right borders only on the inside cells, the following is the markup and CSS that I have:

table {
  border-collapse: collapse;
}

td {
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  padding: 10px;
}

td:first-child {
  border-left: 0;
}
<table>
  <tbody>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>

The output works fine in Chrome but Firefox and IE (current version) does not display the left border of the cell in the second row

Screenshot example

Is there a problem with how I implemented it the CSS or should I just use classes on the 2nd row?

Here's a working preview in codepen

Upvotes: 2

Views: 2711

Answers (3)

Johannes
Johannes

Reputation: 67748

Your border definition seems a bit too complicated. If you just use border: 1px solid #aaa; (for all borders, which will not produce any duplicated borders due to border-collapse: collapse) and border-left: none; for td:first-child, the result is displayed as desired:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #aaa;
  padding: 10px;
}

td:first-child {
  border-left: none;
}
<table>
  <tbody>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>

Upvotes: 0

KyleMit
KyleMit

Reputation: 29889

This happens because the first-child selector wipes out the left border:

td:first-child {
    border-left: 0;
}

Which is applied to the first cell in the second row:

Example Screenshot

Which actually feels like a reasonable interpretation of the spec.

If you can change the markup, the problem becomes much easier to address by manually adding a class to any cell you'd like to have a left border, but that's not super clean.

I can't think of any way for the selector on the second row to be aware of the rowspan on a child of the first row in order to conditionally remove the left border.

Any table border on the perimeter set to none or 1px solid white will sit behind the table border of inner cells (when border-collapse is set to collapse) so you can't just give every cell the border and then remove from the table edges.

Upvotes: 1

kenicky
kenicky

Reputation: 441

I just add attribute border="1" cellspacing="0" cellpadding="0" and style 

border-collapse: collapse;
border-color: blue;
border: none;

to <table>

and just

border-color: blue; in td

see this link.

codepen

Upvotes: 0

Related Questions