The answer is
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>
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.
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
In my opinion, the easiest way to do is adding padding to your tag.
td {
padding: 10px 0
}
Hope this will help you! Cheer!
Simply you can use padding-top and padding-bottom on a td element.
Unit can anything from this list:
Demo Code:
td_x000D_
{_x000D_
padding-top: 10px;_x000D_
padding-bottom: 10px;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>Firstname</th>_x000D_
<th>Lastname</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Peter</td>_x000D_
<td>Griffin</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Lois</td>_x000D_
<td>Griffin</td>_x000D_
</tr>_x000D_
</table>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.
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.
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.
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 */
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>
Create an another <tr> just below and add some space or height to content of <td>
Checkout the fiddle for example
Source: Stackoverflow.com