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

我有这样的代码：混合和匹配表元素和表格样式的元素

<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教程修改可选标签来创建标题行。谢谢。

来源

2013-03-05 Aaron Schif

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

这是无效的html。浏览器会首先解析你的html代码。，因为div不是table或tr的有效孩子，浏览器会尝试更正此问题，并执行一些魔术。例如在铬这个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工作？

来源

2013-03-05 15:37:28

我看到了结果。结果是我试图做不到的事情。原因很复杂。请参阅我提供的链接。我有一个带有隐藏的单选按钮的表格，用于切换数据的排序方式。请不要回答，除非你有一个答案，而不是一个模糊的（“魔术”）描述发生了什么。 – 2013-03-06 02:48:49

@AaronSchif如上所述，它需要很长时间才能发表评论，但它解释说，由于错误处理不同，您不应该创建无效的html。（http://www.w3.org/wiki/Validating_your_HTML#Different_browsers_interpret_invalid_HTML_differently）。即使它被定义（html5），你也可以从一开始就创建这个更正结果。因此您只需要知道浏览器使用代码执行一些_magic_（处理无效html的浏览器特定规则），但不知道如何。现在还不清楚为什么你不这样想：http://jsfiddle.net/MdamF/1/ – 2013-03-06 07:19:19

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

回答

相关问题