开发者

Html table width

开发者 https://www.devze.com 2023-01-13 13:19 出处:网络
I have code like this: <table width=\"625px\"> <tr style=\"background-color:#CCC; font-size:14px;\">

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']);?&开发者_StackOverflow社区gt;  </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?


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;


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


Use the overflow property:

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


use the overflow style property on the "td" tag

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


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消