In Table Fixed Layout How To Give Just One Column A Width Wider Than All The Others?

I am wondering whether it is possible to have a fixed table layout and have one column in the middle with a wider width than all the others...?

I'd apprec开发者_开发技巧iate any help! :)

Thanks, Piotr.

---

Just add the style=\"width: 20%;\" to the th (or td) tag of that column. Check [1]:

<table style="table-layout:fixed; border: 1px solid black; ">
    <tr>
        <th style="width:30% ">name</th>
        <th style="width:70% ">Color</th>
    </tr>
    <tr>
        <td>N1</td>
        <td>red</td>
    </tr>
    <tr>
        <td>N2</td>
        <td>blue</td>
    </tr>
</table>

[1] http://jsfiddle.net/AP5rL/1/

---

Just set the width attribute on the TD tag corresponding to the wider column.

Example:

<table width="650">
    <tr>
        <td width="100">normal</td>
        <td width="100">normal</td>
        <td width="250">wide</td>
        <td width="100">normal</td>
        <td width="100">normal</td>
    </tr>
</table>

---

Can you add a class to the column that needs a different width? If so, you can use the class to manipulate width:

HTML

<table width="650">
  <tr>
    <td>normal</td>
    <td>normal</td>
    <td class="wider">wide</td>
    <td>normal</td>
    <td>normal</td>
  </tr>
</table>

CSS

td.wider {
  width: 250px;
}