CSS: how do I create a gap between rows in a table?
HtmlCssHtml Problem Overview
Meaning making the resultant table look less like this:
[===ROW===] [===ROW===] [===ROW===] [===ROW===]
... and more like this:
[===ROW===][===ROW===]
[===ROW===]
[===ROW===]
I tried adding
margin-bottom:1em;
to both td and tr but got nothing. Any ideas?
Html Solutions
Solution 1 - Html
All you need:
table {
border-collapse: separate;
border-spacing: 0 1em;
}
That assumes you want a 1em
vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.
Sort of weird that some of the answers people gave involve border-collapse: collapse
, whose effect is the exact opposite of what the question asked for.
Solution 2 - Html
table {
border-collapse: collapse;
}
td {
padding-top: .5em;
padding-bottom: .5em;
}
The cells won't react to anything unless you set the border-collapse first. You can also add borders to TR elements once that's set (among other things.)
If this is for layout, I'd move to using DIVs and more up-to-date layout techniques, but if this is tabular data, knock yourself out. I still make heavy use of tables in my web applications for data.
Solution 3 - Html
If none of the other answers are satisfactory, you could always just create an empty row and style it with CSS appropriately to be transparent.
Solution 4 - Html
If you don't have borders, or have borders and want the spacing inside the cells, you can use padding
, or line-height
. As far as I know, margin has no effect on cells and rows.
A CSS property for spacing of cells is border-spacing
, but it doesn't work on IE6/7 (so you can use it depending on your crowd).
If all else fails you can use the old cellspacing
attribute in your markup - but this will also give you spacing between the columns. Some CSS reset suggest you should set it anyway to get cross-browser support:
> /* tables still need cellspacing="0"
in the markup */
Solution 5 - Html
Simply you can use padding-top
and padding-bottom
on a td
element.
Unit can anything from this list:
Demo Code:
td
{
padding-top: 10px;
padding-bottom: 10px;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
Solution 6 - Html
This is the way (I was thinking it's impossible):
First give the table only vertical border-spacing (for example 5px) and set it's horizontal border-spacing to 0. Then you should give proper borders to each row cell. For example the right-most cell in each row should have border on top, bottom and right. The left-most cells should have border on top, bottom and left. And the other cells between these 2 should only have border on top and bottom. Like this example:
<table style="border-spacing:0 5px; color:black">
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
</table>
Solution 7 - Html
In my opinion, the easiest way to do is adding padding to your tag.
td {
padding: 10px 0
}
Hope this will help you! Cheer!
Solution 8 - Html
the padding in the TD works if you want the space to have the same background color as the td
in my case, requirement was for white space between header row and whatever was above it
by applying this styling to a single cell, i was able to get the desired separation. It was not necessary to add it to all cells... Arguably not the MOST elegant, but possibly more elegant than separator rows.
<td colspan="10">
<div class="HeaderRow"
style="margin-top:10px;">
<%# Eval("VendorName")%>
</div>
</td>
Solution 9 - Html
If you stick with the design using tables the best idea will be to give an empty row with no content and specified height between each rows in the table.
You can use div to avoid this complexity. Just give a margin to each div.
Solution 10 - Html
You could also just modify the height for each row using CSS.
<head>
<style>
tr {
height:40px;
}
</style>
</head>
<body>
<table>
<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>
</table>
</body>
You could also modify the height of the <td>
element, it should give you the same result.
Solution 11 - Html
Create an another <tr>
just below and add some space or height to content of <td>
Checkout the fiddle for example
Solution 12 - Html
Add following rule to tr and it should work
float: left
Sample (Open it in IE9 offcourse :) ): http://jsfiddle.net/zshmN/
EDIT: This isn't a legal or correct solution as pointed out by many, but if you are left with no option and need something this will work in IE9.
So all those who are giving down votes, please let us know correct solution as well