修复了HTML表格中的列宽

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.

Answer 1

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.

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

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 word-wrap: break-word CSS property.

your code should look like this

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

Answer 5

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>