Berniew Posted December 19, 2005 Share Posted December 19, 2005 Can someone explain how I can center a tabular table in a division? Also, I have specified a different background and text color for the header (inverse of the data: black background, white text) which works well however when I set the border color around the header to white it gives the appearance that the header data is 1px smaller. What I would like to do is keep the boarder black but keep the two cell dividers white. <html><head><style>#main { width:430px; float:right; padding:8px 0; margin:0; } #tblodds { position: relative; border-collapse: collapse; border:1px solid #000000; width: 90%; } #tblodds td { border:1px solid #000000; padding: 0 .5em 0 .5em; } #tblodds th { background-color: #000000; color: #ffffff; border:1px solid #ffffff; padding: 0 .5em 0 .5em; text-align: center; }</style></head><body><div id="main"> <table id="tblodds"> <tr> <th>Probability of cards hitting the flop</th> <th>Odds</th> <th>%</th> </tr> <tr> <td>Two suited cards</td> <td>0.8:1</td> <td>55.0</td></tr> <tr> <td>No suited cards</td> <td>1.5:1</td> <td>40.0</td> </tr> <tr> <td>Pair</td> <td>5:1</td> <td>17.0</td> </tr> <tr> <td>Three suited cards</td> <td>18:1</td> <td>5.2:1</td> </tr> <tr> <td>Three cards to a straight</td> <td>28:1</td> <td>3.5:1</td> </tr> <tr> <td>Three of a kind</td> <td>424:1</td> <td>0.24:1</td> </tr> </table> </div></body></html> Link to comment Share on other sites More sharing options...
S@m Posted December 19, 2005 Share Posted December 19, 2005 You can center an object with margin: 0 auto; #container { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px;} Link to comment Share on other sites More sharing options...
aspnetguy Posted December 19, 2005 Share Posted December 19, 2005 to change border to black but keep divders white do this. #tblodds th { background-color: #000000; color: #ffffff; border:1px solid #000000; padding: 0 .5em 0 .5em; text-align: center; } then change your <th>'s a bit <tr> <th style="border-right:1px solid #ffffff">Probability of cards hitting the flop</th> <th style="border-right:1px solid #ffffff">Odds</th> <th>%</th> </tr> Link to comment Share on other sites More sharing options...
Berniew Posted December 19, 2005 Author Share Posted December 19, 2005 Thank you for the help S@m my table is now centered. Thank you for the help with the border aspnetguy the changes have been made. Interstingly when I tested the page in IE the border is exactly the way I want it without having to make any changes but in FireFox is where I had the problem. I went and made the change and now both look the same. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now