Question

我有一个包含三个部分的表格，thead，tbody和tfoot。

我想将tbody样式设置为display:block;，因此当它达到一定高度时会有滚动条。但是我注意到当我将tbody样式设置为display:block;时，colspans在表中不起作用，就像表格忽略它一样。有什么我做错了，或者这是一个css3错误？

请参阅我的示例HTML＆amp;下表中的CSS（使用JSfiddle）

以下是我的问题的图片： enter image description here

以下是我要完成的事情： enter image description here

的jsfiddle http://jsfiddle.net/fT3EC/3/

表格

<table>
    <thead>
        <tr>
            <td class="name" colspan="2">Name</td>
            <td class="price">Price</td>
        </tr>
    </thead>

    <tbody>
            <tr>
                <td class="name" colspan="2">Product 1</td>
                <td class="price">$100.00</td>
                <td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            </tr>
            <tr>
                <td class="name" colspan="2">Product 2</td>
                <td class="price">$50.00</td>
                <td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            </tr>
            <tr>
                <td class="name" colspan="2">Product 3</td>
                <td class="price">$10.00</td>
                <td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            </tr>
    </tbody>

    <tfoot>
            <tr>
                <td colspan="2"><b>Sub-Total:</b></td>
                <td>$160.00</td>
            </tr>
            <tr>
                <td  colspan="2"><b>Free Shipping:</b></td>
                <td>$0.00</td>
            </tr>
            <tr>
                <td  colspan="2"><b>Total:</b></td>
                <td>$160.00</td>
            </tr>
    </tfoot>
</table>

CSS：

table {width:500px;}
tr,td {padding:5px; border:1px solid;}
.price {width:100px;}
.info {width:200px;}

tbody {
    display:block; /* this is what causes the problem */
    max-height:200px;
    overflow-y:scroll;
}

Answer 1

默认显示tbody为table-row-group，如果您更改或设置tbody或absolute fixed中的position，它将不属于表格布局了。

在display上重置的流程中，它将留下第一个单元格的空间。浏览器仍然会尝试保持连贯的布局。并且会为缺失的细胞留下空隙。

您可以尝试一些解决方法，例如在桌面上使用table-layout，这样您就可以在100％宽度上设置tbody block。的 DEMO

tbody tr可以选项设置为display:table。

无论如何，tbody将脱离它的父table的流量，并且在tbody和theader中列的大小不会相同

<强> and with 3rd col overflowing

some cloning with jquery to avoid splitting table ?

Answer 2

尝试将表拆分为三个表一个用于标题一个为身体一个用于页脚

然后在body表周围加一个div，这样你就可以正确地控制overflow: scroll;之类的东西了

Answer 3

忘掉黑客，只是不要用桌子。使用div创建一个网格，然后你就可以拥有你想要的行为，并且它可以被设计为完全符合你想要的样式。

当Table tbody设置为Display：block时，Table Colspan不工作;

3 个答案: