How to separate two tr in html table

Question

Is it possible to have a visual separator between two rows ( tr ) in an HTML table.

I tried with <br> , but this is invalid code.

I tried adding the top of the tr add-on after the break, but this will not work.

I am currently using an empty string:

 <tr><td colspan=\"X\">&nbsp;</td></tr> 

but I don’t think this is the best solution, especially since I have to make sure that colspan adjusted if there is a change - the number of columns.

Is there any way to solve this?

Answer 1

Edited to reflect my repeated reading of the question, not the title of the question (the original answer remains below the rule).

If you need a visual separator (and not just white), just use:

 td { border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */ } 

---

The only way to increase the row spacing of the table that I know about right now is to use padding for individual rows / cells:

 td { padding: 0.5em 1em; border: 1px solid #ccc; } 

JS Fiddle demo

Although it is possible to use transparent (or background-color -ed borders):

 table { border-collapse: separate; } td { border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; } td:hover { border-color: #ccc; } 

JS Fiddle demo

Answer 2

The <tr /> element is not stylish in all browsers, however you can always add padding or bottom border to cells inside tr.

Answer 3

In fact, for this I always use a separate tr . I style them (for example, one td inside) through the separator class.

For the colspan problem, see Colspan all columns .