混合和匹配表格元素和表格样式元素答案

【问题标题】：Mix and match table elements and table-styled elements混合和匹配表格元素和表格样式元素
【发布时间】：2013-03-05 23:42:48
【问题描述】：

我有这个代码：

<style>
tr, .bar{
    display: table-row;
}
th, td, .pcell{
    display:table-cell;
    border: black solid 1px;
}
</style>
<body>
    <table>
        <div class="bar">
            <label class="pcell">Stuff</label>
            <label class="pcell">moose</label>
        </div>
        <tr>
            <td>Other Stuff</td>
            <td>cow</td>
        </tr>
        <tr>
            <div class="pcell">More Stuff</div>
            <td>chicken</td>
        </tr>
    </table>
</body>

我希望能够用标签替换表格单元格，而无需替换整个表格。有没有办法做到这一点？我可以只替换一行，而不是整个表。

我正在尝试使用改编自 this 教程的可选标签创建标题行。谢谢。

【问题讨论】：

标签： html css html-table

【解决方案1】：

我知道这不是解决方案，但它不适合评论。

这不是有效的 html。浏览器将首先解析您的 html 代码。因为div 不是table 或tr 的有效子代，所以浏览器会尝试纠正此问题，并执行一些魔术。例如在 chrome 中，这个 html 代码将被转换成这样：

<div class="bar">
     <label class="pcell">Stuff</label>
     <label class="pcell">moose</label>
</div>
<div class="pcell">More Stuff</div>

<table>
    <tr>
        <td>Other Stuff</td>
        <td>cow</td>
    </tr>
    <tr>
        <td>chicken</td>
    </tr>
</table>

因为您的 css 代码没有预期的结果。

为什么要使用标签，th 和 thead 不起作用？

【讨论】：

我已经看到了结果。结果是我试图不去实现的东西。原因很复杂。请参阅我提供的链接。我在标题中有一个带有隐藏单选按钮的表格，用于切换数据的排序方式。请不要回答，除非您有一个答案，而不是对正在发生的事情的模糊（“魔术”）描述。
@AaronSchif 如前所述，评论太长了，但它解释说，由于不同的错误处理，您不应该创建无效的 html。 (w3.org/wiki/…)。即使它被定义（html5），那么您也可以从一开始就创建这个更正的结果。因此，您只需要知道浏览器使用代码执行了一些 magic（用于处理无效 html 的浏览器特定规则），而不是如何执行。仍然不清楚你为什么不做一些这样的想法：jsfiddle.net/MdamF/1