我可以在我的 html 表格标题中混合百分比宽度和像素宽度吗？答案

【问题标题】：Can I mix percent width and pixel width in my html table headers?我可以在我的 html 表格标题中混合百分比宽度和像素宽度吗？
【发布时间】：2012-01-17 23:03:23
【问题描述】：

我有一个表格，其中的列数可能会发生变化（从 1 到 10），除了一列应始终保持固定宽度以便没有额外空间或不换行（它将用于添加或删除表中的行）。

表格的总宽度不应超过 800 像素，我希望将提交按钮浮动到右侧。

有没有办法将表格列宽设置为百分比变化，并将一个静态列设置为固定像素宽度？还是会导致问题？我尝试了许多不同的方法，但似乎都不是最理想的。有没有一种优雅的方式来做到这一点？我附上一张图片供参考：http://bayimg.com/BAlLLaaDP。

HTML：

<html>
    <head>
    <style>
        #container {
         width: 800px;
       }
       #table_container {
         padding:5px;
       }
       #table_container table {
         width: 85%;
       }
       .action {
       }
       col {
       width:29%;
       }
       table {
       width:650px;
       table-layout: fixed;
       float: left;
       }
     </style>
     </head>

<body>
<div id="container" class="clearfix">

    <form>
            <table class="" border=1>
                <colgroup>
                    <col >
                    <col>
                    <col>
                    <col class="action">
                </colgroup>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email </th>
                <th></th>
                <tr>
                    <td>content 1</td>
                    <td>content 2</td>
                    <td>content 3 </td>
                    <td><a href="">delete row</a>
                </tr>   
                <tr>
                    <td>content 1</td>
                    <td>content 2</td>
                    <td>content 3 </td>
                    <td><a href="">delete row</a>
                </tr>
            </table>
        <div class="mult_answer">
            <button class="button orange">Submit Answer</button>
        </div>
        </form>

</div>

</body>
</html>

【问题讨论】：

标签： html html-table fixed-width

【解决方案1】：

如果所有行的总宽度不超过 100%（如果超过行或表格将被缩放以适应内容），则可以在一个表格中存在宽度以像素和百分比为单位的行。
如果您将col 仅用于宽度目的，则可以将宽度添加到th 元素。最好至少保留一列没有宽度，以便它可以缩小以适应。
附言我不明白为什么width: 100%; 元素需要td。

【讨论】：

谢谢。我删除了不应该存在的 td 元素的宽度。