Question

我有这段代码：

<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教程改编的可选标签。感谢。

Answer 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是否有效？

混合和匹配表格元素和表格样式的元素

1 个答案: