Top and bottom borders on table row

css, css-tables

Solution

This works on Firefox and IE8:

table {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px; /* take out spaces between cells */
}

tr {
    background-color: #ccc;
}

td {
    width: 50%;
    border-top: 1px solid #f00; 
    border-bottom: 1px solid #0f0; /* move spacing to the cell */
}

The above uses the standard HTML display systems so that it will work on IE8. I have:

- Set `border-collapse` to `separate`, which prevents the table from collapsing the borders, so it draws each border

- Added `border-spacing` set to `0px` to remove the spacing between cells

- Removed the `display` directives, allowing the table to be displayed as a table

- Moved the `border` directives to the cells, rather than the rows.

http://jsfiddle.net/s6LQ7/1/

Problem

How to do this? I want to have different colors on top and bottom borders on the rows in my table. Chrome will render it correct if I use `display: block`, but I don't know if that is the proper way of doing it. However, I want it to work in IE8 and I do not know how. I've prepared a fiddle that works in Chrome: http://jsfiddle.net/s6LQ7/

Original source