TBJ TBJ - 6 months ago 19
HTML Question

Bottom border in table is cut by vertical border

I have a table where I need a vertical spacing between cells AND a bottom border that is not cut by the vertical spacing. If I use for example this CSS:

table td {
border-right: 15px solid transparent;
}
table tr {
border-bottom: thin solid #d6d6d6;
}


... the bottom border is cut by the vertical borders. I have also tried border-spacing (and 'border-collapse: separate') with no luck. I really need the bottom border to span uncut under all cells in a row. Is there any way to accomplish this?

EDITED:
As most answers suggest that I use padding, I add this image to show what happens. An image within a cell extends beyond the padding and ends up to close to the next cell (I use Firebug to select the td element and to show the right padding here:

enter image description here

So I need to accomplish a border-spacing that keeps the cell content at a distance from the necxt cell AND without cutting the bottom border.

Answer

/* COLLAPSE CELLS */
table {
  border-collapse: collapse;
}

/* SPACE CELLS */
table td:not(:last-child) {
  padding-right: 15px;
}

/* BORDER BOTTOM */
table td {
  border-bottom: 1px solid #000;
}
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td><img src="http://lorempicsum.com/futurama/300/300/2"></td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Looooooooooooooooooooooooooooooooong Text</td>
  </tr>
</table>