【问题标题】:Setting width of table cells with CSS使用 CSS 设置表格单元格的宽度
【发布时间】:2012-01-17 10:10:17
【问题描述】:

我有一个 HTML 表格,我必须在其中设置整体宽度,并希望确保标签列不会变得太宽。

它在 Firefox 4 中按预期工作,但 IE 9 似乎完全忽略了 with 属性。

<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>

<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>

</body>
</html>

【问题讨论】:

    标签: html css internet-explorer firefox cross-browser


    【解决方案1】:
    • 添加&lt;!DOCTYPE html&gt;作为获取标准模式的第一行(与您的问题没有直接关系,但您绝对应该这样做,除非您喜欢将IE9伪装成IE5 - Quirks Mode)。
    • 将表格的整体宽度设置为table 而不是th.caption

    见:http://jsbin.com/icafo3

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    table,th,td { border: solid 1px; border-collapse: collapse; }
    table { width: 700px; }
    .label { width: 100px; }
    </style>
    </head>
    <body>
    
    <table>
    <tr><th class="caption" colspan=2>Caption</th></tr>
    <tr><td class="label">Label</td><td>Stuff...</td></tr>
    <tr><td class="label">Label</td><td>Stuff...</td></tr>
    </table>
    
    </body>
    </html>
    

    【讨论】:

    • 只需添加 就足以让它在两种浏览器中都工作。谢谢!
    • 我想这毕竟是相关的 :) 我想我对想要的最终结果有点困惑。
    猜你喜欢
    • 2017-12-17
    • 2011-10-10
    • 1970-01-01
    • 1970-01-01
    • 2015-01-04
    • 2012-10-03
    • 2016-04-06
    • 2019-01-06
    • 1970-01-01
    相关资源
    最近更新 更多