My attempt to establish a maximum width for a column in a table failed, as all cells in that column did not adhere to the same maximum width. Here's what I tried initially:
<table border="1">
<tr><td style="max-width:100px">a bunch of text here, it should get wrapped</td></tr>
<tr><td>a bunch of text here, it should get wrapped</td></tr>
</table>
(You can also view this at http://jsfiddle.net/Le6H6/4/)
I anticipated that specifying the maximum width for one cell would automatically apply it to all cells in the same column. Yet, the cell in the second row exceeded the set maximum width, leaving both cells wider than intended.
I have two questions:
- Why did this occur?
- I understand that setting the max width on every cell in the column individually or through CSS can achieve my desired outcome. But is there a method to set the maximum width for the entire column without altering each cell individually?