表列更改行为取决于内容(colspan)

时间:2013-09-02 14:14:00

标签: html css html-table

我有一张带有colspan的表,表现不佳。

请比较以下小提琴:

http://jsfiddle.net/lucaswiener/WBdc8/

http://jsfiddle.net/lucaswiener/WBdc8/1/

我预计第二个小提琴就像第一个小提琴一样。

如果它们看起来与您相同,使用我的浏览器(最新的chrome),第一个列呈现第一列(包含“foo”的列),没有任何填充。第二个在第一列中有很多左边填充。

第一个小提琴HTML代码:

<table border="1">
<tr>
    <td>
        foo
    </td>
    <td class="lol">
        bar
    </td>
</tr>
<tr>
    <td colspan="2">foo walked into a bar. When he ordered food, the bar kicked him out :(
    </td>
</tr>

第二小提琴HTML代码:

<table border="1">
<tr>
    <td>
        foo
    </td>
    <td class="lol">
        bar
    </td>
</tr>
<tr>
    <td colspan="2">foowalkedintoabar.Whenheorderedfood,thebarkickedhimout:(
    </td>
</tr>

这怎么可能?

编辑: 刚刚在Firefox中测试了这个,它似乎按预期工作。我想这个问题适用于webkit浏览器。

3 个答案:

答案 0 :(得分:1)

在这种情况下,Chrome的默认行为与Firefox和IE有所不同 尝试添加您的风格table-layout: fixed;,例如:

table {
   table-layout: fixed;
   width: 100%;
}

调整柱宽(小于100%)。它应该解决你的问题。

另见:

Why is my table cell width wrong in Chrome?


如果您想让列使用所有剩余空间,可以使用*

.lol {
    width: *;
}

答案 1 :(得分:0)

您需要调整第一行中两列的宽度。如果您只指定单个宽度,那么它将尝试达到该宽度,但由于您的第二个jFiddle在测试中没有空格的第二行,它只能做50%而第一行达到约90%(从那以后)你指定了100%)。

最好的办法是指定两个td的宽度:

<table border="1">
    <tr>
        <td class="first">
            foo
        </td>
        <td class="lol">
            bar
        </td>
    </tr>
    .....

并添加/更改css:

table {
    width: 100%;
}

.lol {
    width: 90%;
}

.first {
    width: 10%;
}

答案 2 :(得分:0)

您的代码实际上没有任何问题。如果您更改代码第二行中的文本,它将自动更改为第一个小提琴。

尝试一下,让我知道这是否对你有帮助!

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1