当表格tbody设置为display:block时，表格的colspan属性无法正常工作。

Question

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

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

请参考我的示例HTML和CSS表格（带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;
} 

- JCBiggar

---

可能是个bug，但你的HTML还有其他问题。你将<td class="name" colspan="2">设置为跨越2列，而实际上它根本不应该跨越任何列。 - VikingBlooded

通过使用 display:block 格式化，您明确告诉 tbody 不要像表格主体元素一样运作，而是像普通块元素一样运作...因此我认为您不能期望在这里得到表格主体应有的行为。 - CBroe

你是对的。我在制作演示表格时犯了那个错误。实际的表格中有图片，但我不想在我的问题或jsfiddle中添加很多图片。真正的问题在于display:block;，但感谢你指出了这一点。 - JCBiggar

Answer 1

的默认显示方式是table-row-group，如果您更改或将设置为absolute或fixedposition，它将不再是表格布局的一部分。

在重置display的情况下，它将留下第一个单元格的空间。浏览器仍会尝试保持布局的连贯性，并为缺失的单元格留下间隙。

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

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

无论如何，都将脱离其父级table的流程，并且列在和中的大小不会相同

并且第三列溢出

一些使用jQuery克隆以避免分割表格的方法？

- G-Cyrillus

---

使用"display:table-row-group"代替"display:block"解决了我之前遇到的类似colspan问题。谢谢！ - mynameispaulie

Answer 2

尝试将您的表拆分为三个表格 一个用于标题 一个用于正文 一个用于页脚

然后在正文表格周围放置一个div，这将允许您正确控制诸如overflow: scroll;之类的内容。

- JRulle

---

拆分表格会破坏thead、tbody和tfoot之间的关系，这样就没有必要再使用3个表格了，因为它们的内容不再相关。 - G-Cyrillus

正确...这是所需功能和关系之间的权衡。 - JRulle

或许你可以使用jQuery中的克隆，而不是分割。http://jsfiddle.net/fT3EC/6/ 这只是一个建议，仅供参考 :) - G-Cyrillus

Answer 3

忘掉那些hack，不要使用表格。用div创建一个网格，这样你就可以拥有想要的行为，并且可以根据你的需求进行样式设计。

- jme11

---

如果数据值得放入表格中，为什么要将其删除？表格元素样式可以像其他任何标签一样进行重置。 - G-Cyrillus

我无法反驳那个逻辑，你使用clone()的最终解决方案非常优雅。为此点赞。我想我的观点是，如果所需行为比可访问性（或者正如你指出的语义）对于OP更重要，那么就不要试图将表格强制产生它不支持的行为。再次感谢你提供的完美解决方案。 - jme11

谢谢您的反馈，我对那个克隆想法并不感到自豪 ;) - G-Cyrillus