Html 当Table tbody设置为Display:block时，Table Colspan不工作；

我有一个包含三个部分的表，

thead

、

tbody

和

tfoot

我想将

tbody

样式设置为

display:blockdisplay:block

，则

列span

在表中不起作用，好像表忽略了它一样。是我做错了什么，还是这是一个css3错误

请参考下表中我的HTML和CSS示例（使用JSFIDLE）

这是我的问题的图像：

以下是我试图实现的目标：

JSFIDDLE

表格：

<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>

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;
} 

---

t正文的默认显示为

表格行组

，如果您更改它或将

t正文

设置为

绝对

或

固定

位置，它将不再是表格布局的一部分

在显示复位的流程中，它将保留第一个单元格的空间。浏览器仍将尝试保持布局的一致性。并为缺失的细胞留下一个空隙

您可以尝试一些解决方法，例如在表格上使用

表格布局

，这样您就可以将

t车身块

设置为100%宽度

t车身tr

可选择设置为

display:table

无论如何，

tbody

将脱离其父

表的流程，并且tbody和theader中的列大小将不相同



试着把你的桌子分成三张
一个用于标题
一个给身体
一个用于页脚

然后在body表周围放置一个div，它将允许您控制像
overflow:scroll正确
忘记这些黑客，只是不要使用表格。用div创建一个网格，这样你就可以拥有你想要的行为，并且可以按照你想要的方式设计它的样式。
是的，可能有bug，但你的HTML中还有其他问题。您将设置为span 2 cols，但它不应该跨任何列。通过使用
display:block
对其进行格式化，您明确告诉
tbody
不要像表体元素那样工作，但是就像一个普通的块元素一样…所以我认为你不能期望从表体中得到预期的行为。你是对的。。我在制作演示表时犯了那个错误。真正的表有图像，但我不想在我的问题或JSFIDLE中添加很多图像。真正的问题在于显示器：阻塞；但感谢您指出这一点。如果数据应该放在一个表中，为什么要删除它？table elements样式可以像其他任何样式一样重置tagI无法反驳这种逻辑，使用clone（）的最终解决方案非常优雅+1美元。我想我的观点是，如果所需的行为比OP的可访问性（或语义，如您所指出的）更重要，那么停止尝试破解一个表，使其产生一个它不支持的行为。再次强调，最终的解决方案非常好。谢谢你的反馈，我对克隆的想法并不太自豪；）拆分表消除了thead、tbody和tfoot之间的关系，那么就没有必要有3个内容不再相关的表了，对吧。。。这是所需功能和关系之间的折衷。否则，您可以通过jquery使用克隆，而不是拆分。。。。不是建议，更像是交谈：）使用“display:table row group”而不是“display:block”修复了我遇到的类似colspan问题。谢谢