Question

I am trying to give a left border to a table cell. It works fine in Chrome, but in Firefox and IE the border isn’t displayed.

I saw in the documentation that left and right borders aren’t widely supported but maybe there is a workaround or am I doing something wrong in the code.

The strange thing is that I have rounded borders in my table which have both left-borders and bottom borders and they are shown fine on each browser.

Here’s the relevant code:

<tr class="Panel_Middle_Row">
    <td class="Panel_Middle_Left_Cell" width="20"></td>
    <td class="Panel_Middle_Middle_Cell">blablabla</td>
    <td class="Panel_Middle_Right_Cell"></td>
</tr>

And the according css:

.Panel_Middle_Left_Cell {
  width: 20px;
  border-left-style:solid;
  border-left-color:#CCC;
  border-left-width:2px;
}
.Panel_Middle_Right_Cell {
  width: 20px;
  border-right-style:solid;
  border-right-color:#CCC;
  border-right-width:2px;*/
}

You can find an example here.

Answer 1

Your td are empty, ence they are not displayed. Add a  .

Or add this to your table class : empty-cells: show;