Html table width

Question

I have code like this:

<table width="625px">
<tr style="background-color:#CCC; font-size:14px;">
    <td style="padding:8px; color:#333"><center><?=stripslashes($arr['signature']);?>  </center></td> 
</tr>      

If $arr['signature'] is a long string, like this gjuytfdcrtrfdscvythgfvtfdgtrfdvbgfvcfgbdc the width doesn't help and it goes very wide. How can I prevent that?

Answer 1

Try:

<td style="width: 160px; max-width: 160px;">

or

<td style="width: 160px; overflow-x: hidden;">

or both together.

See

http://www.highdots.com/forums/html/limit-width-table-cell-271764.html

Answer 2

Use the overflow property:

<table width="625px" style="overfow: hidden;">

Answer 3

use the overflow style property on the "td" tag

<td style="overflow-x: hidden;">your text here</td>

Answer 4

See the section on table widths in the CSS2 spec: http://www.w3.org/TR/CSS2/tables.html#width-layout

Roughly, tables will choose the maximum of the specified width and the sum of the widths of their columns. You have to constrain the width of the column, perhaps by setting a width on the element (you'll want to choose your overflow style here as well).

Example:

<table width="625px">
    <tr style="background-color:#CCC; font-size:14px;">
       <td style="padding:8px; color:#333; width: 625px; overflow: hidden; text-align:center"><?=stripslashes($arr['signature']);?></td> 
    </tr>      
</table>

(Also note that <center> has been long deprecated; please use the text-align CSS property.)

Answer 5

I remember spending hours on that. Use the table-layout:fixed style.

<table style="width:625px;table-layout:fixed;overflow:hidden">

Each column will take the size of its first cell.

Answer 6

there are many ways, depends on what you wish to do. If you apply overflow:hidden then the overflown text would be hidden. You can use overflow:scroll; inside a div like <td style="padding:8px; color:#333"><center><div style="overflow:scroll; width:625px;"><?=stripslashes($arr['signature']);?></div> </center></td> This will create a scroll for the overflow text, only for this cell (there is need to give width for this method).

Here an example for the overflow:scroll;