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

Question

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

Dav*_*vid 11 html html-table fixed-width

我有一个表可以改变列数(从1到10),除了一列应始终保持固定宽度,以便没有额外的空间或它不会包装(它将用于添加或删除表中的行).

该表的总数不应超过800px,我希望将一个提交按钮浮动到右侧.

有没有办法将表格列宽度设置为百分比,将一个静态列设置为固定像素宽度？或者会导致问题吗？我已经尝试了许多不同的方法,但似乎都不是最理想的.有一种优雅的方式来做到这一点？我附上了一张图片供参考: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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ser*_* T. 6

如果所有行的总宽度不超过100%(如果超过行或表将缩放以适合内容),则可以存在宽度以像素为单位的行和一个表中的百分比.如果仅用于
宽度,th则可col以为元素添加宽度.最好留下至少一根没有宽度的柱子,这样它就可以缩小到合适的位置.
PS我不明白为什么你需要width: 100%;的td元素.

归档时间：	13 年，7 月前
查看次数：	9981 次
最近记录：	10 年，8 月前