Devit!

We recently ran into a situation where we needed multiple tables to appear as a single table.  To make sure each column lined up, we needed to set the width of each cell to a set pixel amount.

The first attempt added a width to the <td> as follows:

<td style="width: 150px">some content goes here</td>

However, by nature, table cells will always resize to accommodate the content that is placed in them. That is what they were designed to do. The cell will maintain its 150 pixel width as long as the content is smaller than the specified width.

The solution is to add a div inside each cell. It adds some extra markup, but will ensure that the cell will not resize beyond the specified width. Divs can be set to specific dimensions, and will stay as such even if the content will not fit inside.

So our table cell code now becomes:

<td><div style="width: 150px">some content goes here</div></td>

Jeremy

Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s. When he’s not banging code into his keyboard at work, Jeremy is banging out beats for his band “Sad Skelton” that you can check out at www.sadskelton.com.

This entry was posted on Wednesday, November 12th, 2008 at 10:20 am and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.