I have a table within a div (see below). How do I add a right padding of say 30px to each cell/column within the table in that div? My understanding is that I have to use inline CSS? Basically, I want each cell to be padded on the right by 30 pixels.
<div id="ddTopMenu";>
<table border="0" >
<tr>
<td width=100></td><td >Dictionary</td><td>Search</td><td>Sources</td><td>References</td>
</tr>
</table>
</div>
You just need to select the dom element starting from 'ddTopMenu':
#ddTopMenu table td {
padding: 0px 30px 0px 0px;
}
Do you truly mean padding, which is like a margin within the TDs themselves, or a 30px separation between cells in the same row?
If you want a padding, then set the padding-right to 30px, possibly excepting the TDs in the last column.
If you want a 30px separation between cells in the same row, then you should take a look at border-collapse. Set the left and right border widths of all TDs to 30px, the border color to the background color of #ddTopMenu, and border-collapse to collapse. You can also set the right and left border widths of the rightmost and leftmost cells, respectively, to 0 so that the 30px separation is only between cells:
<!DOCTYPE html>
<html>
<head>
<style>
#ddTopMenu {
display: inline-block;
border: black 1px solid;
background-color: red;
}
#ddTopMenu td {
background-color: white;
border-left: red 30px solid;
border-right: red 30px solid;
border-collapse: collapse;
}
#ddTopMenu td.first {
border-left-width: 0;
}
#ddTopMenu td.last {
border-right-width: 0;
}
</style>
</head>
<body>
<div id="ddTopMenu">
<table border="0" cellspacing="0">
<tr>
<td width="100" class="first"></td><td >Dictionary</td><td>Search</td><td>Sources</td><td class="last">References</td>
</tr>
</table>
</div>
</body>
</html>