在表格固定布局中，如何只给一列比其他所有列宽？答案

【问题标题】：In Table Fixed Layout How To Give Just One Column A Width Wider Than All The Others?在表格固定布局中，如何只给一列比其他所有列宽？
【发布时间】：2011-10-03 10:28:11
【问题描述】：

我想知道是否可以有一个固定的表格布局并在中间有一列比其他所有的宽度都宽...？

如果有任何帮助，我将不胜感激！ :)

谢谢，彼得。

【问题讨论】：

Table with table-layout: fixed; and how to make one column wider的可能重复

标签： html css layout

【解决方案1】：

只需在对应于较宽列的TD 标签上设置width 属性即可。

例子：

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

【讨论】：

嗨，谢谢你的回答，但它没有帮助......只要我的 css 中有：table-layout: fixed; 它不会工作，但我需要固定宽度，因此，当我使用 javascript 向表中动态添加行时，我的列不会调整大小，因为它看起来很糟糕......其中一个需要比其他更宽，但以适应更宽的下拉选择元素。再次感谢，希望有更多的建议！ :)
这种情况下，估计得用JS来修复了。
如何用 js 修复它，不过……有什么想法吗？

【解决方案2】：

只需将 style=\"width: 20%;\" 添加到该列的 th（或 td）标签即可。检查[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/

【讨论】：

【解决方案3】：

你能在需要不同宽度的列中添加一个类吗？如果是这样，您可以使用该类来操作宽度：

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

【讨论】：