Question

我疯狂地让我的桌子在不同的浏览器上看起来正确，就在我认为我进入另一个浏览器的时候。 IE7 / 8和Firefox是我的目标浏览器。

有人可以看看代码，我无法弄清楚问题是什么。表是由Javascript生成的，我需要它的固定宽度为220px，主要问题是tfoot我有3个tds我控制宽度有问题。

以下是代码的相关部分：

<table class="favouritelinks"  cellspacing="0" cellpadding="0" width="220" >

<thead>
    <tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>


    <tr>
        <td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
        <td rowspan="2"><a href="javascript:insert_value()"><div class="addimg"></div></a></td>
    </tr>
    <tr>
        <td width="50">URL</td><td><input type="text" id="val" name="val" value=""  /></td>

    </tr>


</table>

和css：

.favouritelinks td{
                height: 20px;
                padding: 3px;

                border-bottom: 1px solid white;
                word-break: break-all;


            }
            .favouritelinks td a{
                color: white;
                text-decoration: none;


            }
            thead{
                background: url(img/title5.png) no-repeat;
                color: #444;
                font: bold 16px Helvetica;
                text-shadow: 0 1px 0 #FFF;
                text-align: center;
                width: 220px;
                height: 36px;


            }
            thead tr {
                height: 36px;

            }
            .container{
                width: 220px;
                margin-top: 105px;
                margin-left: 10px;


            }
            .delimg {

                background: url(img/details_close.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .addimg {
                background: url(img/details_open.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .urls {
                display: none;

            }

我做错了什么？

图片http://imageshack.us/photo/my-images/38/56751263.jpg/

Answer 1

在CSS中试试这个：

table {
    table-layout: fixed;
}

Answer 2

从CSS中的 .favouritelinks td 中删除 填充：3px ，一切正常。

或更好的方式

在CSS中设置td宽度而不是HTML

Answer 3

我在IE9 +中的布局方面遇到了同样的问题，但在IE 7/8中却不好。我发现＆＃34; colspan＆＃34;当这个列比其他行更宽，然后其他匹配列的总和不是colspan时，问题就出现了。我在所有列上指定固定宽度，除了我想要用剩余宽度调整的那个。但这并不适用于IE 7/8。所以我最终在不同的＆＃34; table＆＃34;上分割行。解决该布局问题。

表格宽度为IE7 / 8

3 个答案: