开发者

I want all columns(<td></td>) in a <table></table> have the equal length, how to achieve this?

How to achieve it with CSS or HTML?

 <table class="banner"><tr><td>If you need many results, then post your task as piecework here. You only need to pay qualified results.
  </td>
 <td>Make mone开发者_开发百科y by doing piecework</td></tr>
 <tr><td><a href="publish.php">POST PIECEWORK FOR FREE</a><br/></td><td></td></tr></table>


You should use the table-layout property here...

table { table-layout: fixed; }
table td { overflow: hidden; }


Use CSS:

td{overflow:hidden;width:200px;}


In CSS, you can use the width property. This can be done inline or as part of a stylesheet. For some more CSS for tables, check out CSS Styling Tables from w3schools.

td {
    width:200px;
}

<td style="width:200px;">

Or, in HTML, check out the colgroup tag, like this:

<colgroup>
    <col width="200px" />
</colgroup>

I personally use the colgroup the most.


What about:

table { width:100% }
td { width:20% }

(assuming you have 5 td's per row. If you have three, put width 33%, if you have 2 put 50% and so on.


Set the width (CSS or inline if you wish) to be the same percent value for each column (ideally with a total of 100%). This will allow progressive scaling.


You can use the width property for the td selector. However, possibly you want to discriminate one table over the other. In that case, you can classify your 'equal-width' table like this:

<table class="equal_width_columns">
    <tr><td>one</td><td>onetwothree</td></tr>
</table>

<table> <!-- just a regular table -->
    <tr><td>one</td><td>onetwothree</td></tr>
</table>

with css like this:

table.equal_width_colums * td { width: 300px; }


Was searching for this myself. But in my case, the table count was not fixed, hence giving exact percentage was not an option. Found another solution at

http://freachable.net/2007/11/02/AutomaticEqualWidthColumnsInHTMLTables.aspx

Give the cells a very small width. The cells will scale up to fill the available width.

table tr td { width:5%; }
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜