Hey, I have a table on my site in which I want to <th> to have a background-color of black and the <td> to have a background-color of grey. Also to have a border at the bottom of the cell and none on the top of sides.
Now I have managed to get this to work but there seems to be a margin on the right that is causing the last 3/4 pixels or so to be grey in the <th> and the bottom border to be slightly longer (again 3/4px) than the rest.
Here is my HTML table code:
<table id="showstable" width="590" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="25%"><p>Date and Time</p></th>
<th scope="col" width="50%"><p>Venue</p></th>
<th scope="col" width="25%"><p>Tickets</p></th>
</tr>
<tr height="10">
<td><p>26th January 2011</p></td>
<td><p> The Louisiana, Bristol, UK</p></td>
<td><p>£4 Advance<br />£5 on door.</p></td>
</tr>
<tr>
<td><p>23rd December 2010</p></td>
<td><p>The George Hotel, Yate Nr. Bristol, UK</p></td>
<td><p>Buy on the door</p></td>
</tr>
<tr>
<td><p>18th December 2010</p></td>
<td><p>The Griffon Hotel, Bristol, UK</p></td>
<td><p>Buy on the door</p></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>and the CSS:
#showstable{
background-color:#0d0c0e;
}
#showstable p{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding-left:3px;
}
#showtable td{
border: none none solid none;
border-bottom: thin #ccc solid;
}
#showstable th{
border-bottom: thin #ccc solid;
background-color:#000000;
text-align:left;
text-transform:uppercase;
font-size:16px;
}I have tried removing the padding in the #showtables p style as I thought that might have something to do with it but it did nothing.
As you can see on the attachment there is the horrible colour problem on the right side. I would like the black header to stretch to the end of the row.
Any help would be greatly appreciated. I do hate this horrible styling errors that seem to occur in every project.
