Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007

Hi,

I'm in the process of converting all the presentation aspects of my tables
from HTML to CSS (finally). I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the table
to no avail. The left and middle columns remain small, and the right column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

Please help - How can I fix this?

My CSS for the tables is:

table {    border-collapse:collapse;
       border:1px solid #308468;
       text-align:center;
       margin-left: 30%;
       margin-right: 5%;
       width: 55%;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 0.9em;
       color: #000000 }

thead th { background: #27AF81;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   font-size: 1em;
   font-weight: bold;
   padding: 1.5%;
   text-align: center;
   border: 1px solid #308468; }

caption { background: #27AF81;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   font-size: 1em;
   font-weight: bold;
   padding: 2%;
   text-align: center;
   margin-left: 30%;
   margin-right: 5%;
   width: 55%;
   border: 1px solid #308468; }

tbody tr { background: #FFFFFF;
       color: #000000 }

tbody tr.odd { background: #D8FFEE;
       color: #000000 }

tbody td { font-size: 0.9em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   border: 1px solid #308468;
   text-align: left;
   padding: 1.3% }