CSS to get evenly spaced table cells using Repeating Table
This is something that has been on my to do list forever.
I have a page here that displays a grid of images that can be clicked on to view properties.
Its basically done statically, but now really looking to make it a regular product > product_details type set up.
So this is the original:
http://lodges.goodsafariguide.com/botswana/
And this is my still rough dynamic version:
http://lodges.goodsafariguide.com/botswana/indexnew.php
The first issue I've run into is how to space the table cells equally, but align on the left and the right.
So at the moment the repeating code is:
<td class="lodgepreview">
<table width="100%">
<tr>
<td> </td>
</tr>
<tr>
<td class="lodgename"><?php echo($row_rsBotswana['Lodge']); ?></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
And the CSS is just:
.lodgepreview
{
padding: 0 19px 0 0;
width: 180px;
height:144px;
background-color:#195403;
}
.lodgename
{
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
padding:0px 0px 0px 0px;
text-align:center;
background-color:#938B8C;
}
So I'm using the 19px right padding to space the cells, but I only need it in columns 1-4, with no padding in column 5.