html - 在 Firefox 和 IE 中刚刚失控的 html 表格宽度

Closed. This question needs details or clarity 。它目前不接受答案。












想改善这个问题吗？添加细节并通过 editing this post 澄清问题。

6年前关闭。



Improve this question




我应该用 div 构建它，但我必须为我的客户(虚拟用户)使用表。
所以我用 CSS 构建了这个 html 表，它在 Chrome 中完美运行。

我已经阅读了一些相关主题，但没有得到关键技巧!希望有人告诉我错了。

这是我的 CSS，我有 jsfiddle demo here(仅适用于 Chrome)
请先在 Chrome 中查看 jsfiddle 演示，然后尝试 Firefox，你就会明白我的意思。

#content_container {
    width:960px;
}
#content_container .fullcontainer > table {
    border-bottom: 4px solid #222;
}
#content_container .fullcontainer {
width:inherit !important;
margin: 0 auto !important;
padding: inherit !important;
}
#content_container table.eurostyle {
    margin: 25px auto !important;
    border-collapse: collapse !important;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-shadow: 1px 1px 1px #eee;
}
table td img.alignleft {
margin: 0;
}
body h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold;
}
.eachtop {
    border-top: 4px solid #222;
    border-color: #000;
}
.eachaside {
    border-top: 1px solid #222;
    border-top: 1px solid #ccc;
    font-size: 12px;
}
table td {

}
table h2 {
    margin: 2px 0;
    line-height: 1.1em;
    font-size: 22px;
}
.eachtop > td:first-child {
/*height: 40px;*/
padding: 3px 0;
}
.tdfit {
    padding: 0 0 0 1px;
    line-height: 0;
}
.ctable {
    margin: 0 0 0 0px;
}
.ctable td img, .tdfit img {
    max-width: 100%;
    height: auto;
}
.ctable td {
    padding: 1px;
    border: 1px solid #000000;
    border-top: none;
    border-bottom: none;
    line-height: 0.9;
}
.ctable td img {

        }

最佳答案

将 table-layout: fixed 添加到您的表中，您的问题将得到解决。

来自 CSS 技巧:



这意味着不是表格的内容决定宽度，表格第一行的样式现在将决定下面其余行的宽度，这使得布局更多，你猜对了， 固定!

工作示例(经过测试的 Firefox):

http://jsfiddle.net/gt5t01ov/2/