Html <div> 变成 <tr>:正确吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7051219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:03:04  来源:igfitidea点击:

<div> into a <tr>: is it correct?

htmlhtml-tabletablerow

提问by markzzz

Is this code correct?

这段代码正确吗?

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

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

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

don't know for semantic (and W3C rules). What can you say about?

不知道语义(和 W3C 规则)。你能说什么?

回答by Felix Kling

No it is not valid. trelements can only contain thand tdelements. From the HTML4 specification:

不,这是无效的。tr元素只能包含thtd元素。从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 --
>
<!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 --
>

回答by Alohci

Not only is it not valid, but it doesn't work! This mark-up

它不仅无效,而且不起作用!这种标记

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

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

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

Produces this displayed

产生这个显示

The Second Row
The First Row
The Third Row

The div is ejected entirely from the table and placed before it in the DOM

div 完全从表格中弹出并放置在 DOM 中

see http://jsfiddle.net/ELzs3/1/

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

回答by shanethehat

No, you should not really use a divinside a table because it is a block level element. You can override the behaviour with CSS, but it will not validate with W3C if that is your goal.

不,您不应该真正div在表内使用 a,因为它是块级元素。您可以使用 CSS 覆盖该行为,但如果这是您的目标,则不会使用 W3C 进行验证。

回答by SLB

No you should not use a <div>inside of a <tr>. You could use it inside <td>where as the table is a properly nested table, although this may not be best practice. You can actually override display setting of a div or any element. You could actually make a <div>(which defaults to block) display as a table-cell and vice versa.

不,您不应该使用 a 的<div>内部<tr>。您可以<td>在表是正确嵌套表的地方使用它,尽管这可能不是最佳实践。您实际上可以覆盖 div 或任何元素的显示设置。您实际上可以将<div>(默认为阻止)显示为表格单元格,反之亦然。

回答by Pir Abdul

This will work in quirks mode, but the browser which is compatible with standard mode will not work depend upon your doctype. Avoiding quirks mode is one of the keys to successfully producing cross-browser compatible web content

这将在 quirks 模式下工作,但与标准模式兼容的浏览器将无法工作,具体取决于您的 doctype。避免怪癖模式是成功制作跨浏览器兼容 Web 内容的关键之一

Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode.

一些现代浏览器有两种渲染模式。Quirk 模式像以前使用的旧浏览器一样呈现 HTML 文档,例如 Netscape 4、Internet Explorer 4 和 5。标准模式根据 W3C 建议呈现页面。根据 HTML 文档中存在的文档类型声明,浏览器将切换到 quirk 模式或标准模式。如果不存在文档类型声明,浏览器将切换到 quirk 模式。

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

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

JavaScript should not behave differently; however, the DOM objects that JavaScript operates on may have different behaviors.

JavaScript 的行为不应有所不同;然而,JavaScript 操作的 DOM 对象可能有不同的行为。

回答by daneczech

Let's say your table row has 5 columns in general and you want your div to occupy the full width of the table. The following should do the trick.

假设您的表格行通常有 5 列,并且您希望您的 div 占据表格的整个宽度。以下应该可以解决问题。

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