html - 当表 tbody 设置为显示 :block; 时，表 Colspan 不工作

Question

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

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

Please refer to my example HTML & CSS for the table below (with JSfiddle)

这是我的问题的图片:

这是我要实现的目标:

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，这样您就可以将 tbody block 设置为 100% 宽度。 <强> DEMO

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

无论如何，tbody 将脱离其父 table 的流程，并且 tbody 和 theader 中的列大小将不同

and with 3rd col overflowing

some cloning with jquery to avoid splitting table ?