is wider than the column? I want the text to just stay in the column and go down to the next line if it is wider than the column. I'd like to do this without have to use <p> tags and am avoiding divs for now. I have provided an example of code below for my question. I have the columns set at 25% each, but text wider than the column spills into the next column, despite having set the fixed widths.
<body>
<table cellpadding="0" cellspacing="0" width=100%" align="left" valign="top" class="left">>
<caption>New York Yankees 2009 Schedule Snippet</caption>
<colgroup>
<col id="date" />
<col id="time" />
<col id="opponent" />
<col id="home_away" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Opponent</th>
<th>Home/Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>April 20xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>7:05PMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>OAKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>Homexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>April 21xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>7:05PM</td>
<td>OAK</td>
<td>Home</td>
</tr>
</tbody>
</table>
</body>
</html>
*My CSS is:
table { table-layout:fixed;}
col#date { width:25%;}
col#time { width:25%;}
col#opponent { width:25%;}
col#home_away { width:25%;}
<body>
<table cellpadding="0" cellspacing="0" width=100%" align="left" valign="top" class="left">>
<caption>New York Yankees 2009 Schedule Snippet</caption>
<colgroup>
<col id="date" />
<col id="time" />
<col id="opponent" />
<col id="home_away" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Opponent</th>
<th>Home/Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>April 20xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>7:05PMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>OAKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>Homexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>April 21xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>7:05PM</td>
<td>OAK</td>
<td>Home</td>
</tr>
</tbody>
</table>
</body>
</html>
*My CSS is:
table { table-layout:fixed;}
col#date { width:25%;}
col#time { width:25%;}
col#opponent { width:25%;}
col#home_away { width:25%;}