CODEWITHSUNDEEP
htmlcss
Ayush
Ayush

Reputation: 42440

Fixed column width in HTML table

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.

Upvotes: 9

Views: 51457

Answers (5)

Bhavin Vora
Bhavin Vora

Reputation: 451

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.

Upvotes: 19

Rashmi Kant Shrivastwa
Rashmi Kant Shrivastwa

Reputation: 1157

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

Upvotes: 0

jerjer
jerjer

Reputation: 8760

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>

Upvotes: 0

Nadeem
Nadeem

Reputation: 11

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>

Upvotes: 0

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

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

Upvotes: 1

Related Questions