Fixed column width in HTML table

Question

I have an HTML table that has rows added in a PHP loop. This is what the loop body looks like

<tr> <td style="width:220px"><?php echo $a; ?></td> <td style="width:150px"><?php echo $b; ?></td> <td style="width:70px"><?php echo $c; ?></td> <td style="width:70px"><?php echo $d; ?></td> </tr>

The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change, and if the contents in any particular cell are too large to fit, the height should increase to accomodate.

Specify a width for the table itself, that should equal the total of all the individual widths. Keep in mind that even the border width (e.g. 1px) will need to be factored into the total width. But if the cell contains a lengthy string without spaces, it will mess up the table layout a bit because there is no opportunity to wrap. overflow:hidden as suggested by #batbaatar is a good idea. — Web User
– Web User, Commented Jan 18, 2012 at 6:03

cweg · Accepted Answer · 2015-10-12 21:01:27Z

you should try this CSS instruction:

td { word-wrap: break-word; }

that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.

If table's width is still messed up, there is also:

table { table-layout: fixed; } th, td { width: some_value; }

that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.

Sameera Thilakasiri · Accepted Answer · 2012-01-18 06:08:56Z

<tr> <td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td> <td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td> <td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td> <td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td> </tr>

You can try word-wrap:break-word;

About the Property

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Nadeem · Accepted Answer · 2012-01-18 06:09:23Z

You just need to add word-wrap: break-word CSS property.

your code should look like this

<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td>

jerjer · Accepted Answer · 2012-01-18 06:10:36Z

You can wrapped it every tds content with a div and apply css overflow styles on each div:

Try this sample, you may change or add more styles or change the overflow:

<style> div.c220{ width:220px; overflow:hidden; } div.c150{ width:150px; overflow:hidden; } div.c70{ width:170px; overflow:hidden; } </style> <tr> <td><div class="c220"><?php echo $a; ?></div></td> <td><div class="c150"><?php echo $b; ?></div></td> <td><div class="c70"><?php echo $c; ?></div></td> <td><div class="c70"><?php echo $d; ?></div></td> </tr>

Gwenc37 · Accepted Answer · 2014-08-07 09:04:48Z

try this way

<tr> <td style="overflow:hidden;width:200px;"><?php echo $a; ?></td> <td style="overflow:hidden;width:150px;"><?php echo $b; ?></td> <td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td> <td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td> </tr>

or you can use style="WORD-BREAK:BREAK-ALL; in style

Collectives™ on Stack Overflow

Fixed column width in HTML table

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related