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

Question

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 money by doing piecework</td></tr>
 <tr><td><a href="publish.php">POST PIECEWORK FOR FREE</a><br/></td><td></td></tr></table>

Answer 1

Use CSS:

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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; }

Answer 6

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

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