Fixed column width in HTML table.

Question

I have an HTML table in which rows are added to 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 that the contents of the second column of any row are a little large, the width of the second column exceeds 150 pixels, and to compensate for the width of the first column it is reduced. How can I prevent this. I want the width not to change, and if the content in any particular cell is too large to fit, the height should increase to accommodate.

Answer 1

you should try this CSS instruction:

 td { word-wrap: break-word; } 

which works in many browsers (yes, including IE 6, even IE 5.5, but not Fx 3.0. It is recognized only by Fx3.5 +. Also good for Saf, Chr and Op, but I don’t know the exact version for these) and do not no harm to others.

If the table width is still corrupted, there is also:

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

which forces the browser to use a different table algorithm, one where it does not try to adapt many situations, including inconvenient ones, but stick to what the stylesheet says.

Answer 2

 <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 properties

This property indicates whether the current render line should break if the content exceeds the bounds of the specified rendering field for the element (this is somewhat similar to the clip and overflow properties in intent.) This property should apply if the element has a visual rendering, is a built-in element with an explicit height / width, is absolutely positioned and / or is a block element.

Answer 3

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

Answer 4

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

your code should look like this

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

Answer 5

You can wrap it every tds content with a div and apply CSS overflow styles in each div:

Try this sample, you can change or add other 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>