0

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>&nbsp;</td> 
                        <td>&nbsp;</td> 
                        <td>&nbsp;</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.

Attachments table_problem.jpg 25.43 KB
1
Contributor
1
Reply
2
Views
6 Years
Discussion Span
Last Post by reececropley
0

Hey, don't suppose anyone has had a look yet but I have worked it out. In the bottom row I had accidently coded in a 5th column.

Just goes to show you have to double check your code again and again.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.