CSS: Creating table rows with wide borders without bleeding into adjacent rows

Question

I have an HTML table of tickets listings (e.g. http://seatgeek.com/event/show/23634/buffalo-bills-vs-tennessee-titans/). I'd like to highlight certain rows with a 2px border. The problem is that this is bleeding into adjacent cells and covering up other borders.

For example, I have a 1px bottom border on the first row of cells (to designate that it's a header). If I try applying a 2px border to the second row, then it covers up border in the first.

My first reaction was to set a margin for the troublesome, but I've been hunting around for a solution, and it looks like that's not possible. Is there another solution?

Answer 1

You might be having box model crossover. http://www.w3.org/TR/CSS2/box.html

for every px or border added you will need to remove equivalent padding or width. if 1px to left and right then 2px from width.

If this is not he case you may need to add margin to the tr.

Answer 2

It sure looks like its the border collapse that is the problem here. If you remove the

table {
    border-collapse:collapse;
}

you will get what you're looking for.