如何使表格列宽固定？答案

【问题标题】：How can I make table column widths fixed?如何使表格列宽固定？
【发布时间】：2012-12-25 15:28:53
【问题描述】：

我有一个包含两列的表格，第一列 65%，第二列 35%。它完全适合 100% 的屏幕，如果第一列中有足够的文本来填充 65%，但如果它是空的（或少量文本） - 然后第一列缩小，第二列展开。

如何使第一列始终占据屏幕的 65%，无论是否包含文本？

【问题讨论】：

stackoverflow.com/questions/4654481/… - table-layout:fixed 在这里有帮助吗？

【解决方案1】：

试试这个：

<table class="fixed_width">
    <col width="65%" />
    <col width="35%" />
    <tr>
        <td>your data</td>
        <td>your data</td>
    </tr>
</table>

还有 CSS：

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

【讨论】：

【解决方案2】：

<table>
    <tr>
        <td style="width: 65%;">
            first column
        </td>
        <td style="width: 35%;">
            second column
        </td>
    </tr>
</table>

第一列将始终保持 65%，除非您在其中放入大于 65% 的内容（例如大图）

【讨论】：

谢谢。但这不起作用。我做了第一个现在它可以工作了！

【解决方案3】：

尝试添加这个 CSS：

table {
    table-layout: fixed;
    empty-cells: show;
}

https://developer.mozilla.org/en-US/docs/CSS/empty-cells

https://developer.mozilla.org/en-US/docs/CSS/table-layout

@kalpesh 对<colgroup> 的推荐也不错。

https://developer.mozilla.org/en-US/docs/HTML/Element/colgroup

【讨论】：

你能解释一下他们是做什么的吗？
@MyStream 我用参考资料和对后续答案的评论更新了我的答案。

【解决方案4】：

试试这个css：

.table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }

    .td1 {
      border: 1px solid #000;
      width: 65%;
    }

    .td2{border: 1px solid #000;
      width: 35%;
    }

和

<table class="table">
    <tr>
        <td class="td1">data</td>
        <td class="td2">data</td>
    </tr>
</table>

【讨论】：