将一个<div>转换为<tr>，这样做正确吗？

Question

这段代码是否正确？

<table>
    <tr>
        <td>...</td>
    </tr>

    <tr>
        <div>...</div>
    </tr>

    <tr>
        <td>...</td>
    </tr>    
</table>    

我不知道语义方面（以及 W3C 规则）的情况。你能对此发表什么看法吗？

- markzzz

---

HTML标准定义了TR元素的内容模型：“零个或多个td或th元素”。请参见此处：http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tr-element - Šime Vidas

反转可能吗？DIV内部的TR？ - Rodrigo

Answer 1

不，它是无效的。 tr 元素只能包含 th 和 td 元素。来自 HTML4规范：

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>

- Felix Kling

---

那么我如何使用（对于某些tr）不同宽度的一些<td>？ - markzzz

@markzzz：我不知道你的意思，你可以使用CSS指定宽度，或者根据需要使用colspan属性。 - Felix Kling

Answer 2

不仅它无效，而且它也不起作用！此标记

<table>
    <tr>
        <td>The First Row</td>
    </tr>

    <tr>
        <div>The Second Row</div>
    </tr>

    <tr>
        <td>The Third Row</td>
    </tr>    
</table> 

生成此显示

The Second Row
The First Row
The Third Row

被完全从表格中排除，并在DOM中放置在它之前

参见http://jsfiddle.net/ELzs3/1/

- Alohci

Answer 3

不应该在表格内部使用 div，因为它是一个块级元素。虽然可以通过 CSS 覆盖这种行为，但如果您的目标是符合 W3C 标准，那么它将无法通过验证。

- shanethehat

---

我该如何在CSS中覆盖这种行为？ - allenwoot

Answer 4

不应在<tr>中使用<div>。可以在嵌套正确的表格中使用<td>标签，尽管这可能不是最佳做法。您实际上可以覆盖<div>或任何元素的显示设置。实际上，您可以将默认为块级元素的<div>显示为单元格，并反之亦然。

- SLB

Answer 5

假设您的表格行通常有5列，并且您希望您的div占用整个表格的宽度。以下代码应该可以实现此目的。

<tr>
  <td colspan=5>
    <div class="some-class">
      <p>Hey</p>
    </div>
  </td>
</tr>

- daneczech

Answer 6

这将在怪异模式下工作，但与标准模式兼容的浏览器将取决于您的文档类型而不工作。避免怪异模式是成功制作跨浏览器兼容的网页内容的关键之一。

一些现代浏览器有两种渲染模式。怪异模式呈现HTML文档，就像旧版浏览器（如Netscape 4、Internet Explorer 4和5）所做的那样。标准模式根据W3C建议呈现页面。根据HTML文档中存在的文档类型声明，浏览器将切换到怪异模式或标准模式。如果没有文档类型声明，则浏览器将切换到怪异模式。

http://www.w3.org/TR/REC-html32#dtd

JavaScript本身不应该有不同的行为，但是JavaScript操作的DOM对象可能会有不同的行为。

- Pir Abdul