【问题标题】:Why there needs to be text after a <br> inside the <th> tag?为什么在 <th> 标签内的 <br> 之后需要有文本?
【发布时间】:2017-09-22 18:57:07
【问题描述】:

这是一个关于&lt;br&gt; 标签在另一个标签内时的行为的问题。

我正在做这张表,其中有一个&lt;thead&gt;,其中有两个&lt;th&gt;:一个读取“name”,另一个读取“last name”。在 'last''name' 之间插入 &lt;br&gt; 以在两行中显示第二个 &lt;th&gt; 并避免单元格宽度过长。

现在 "last name" 显示为两行,&lt;th&gt; 中的文本不会以相同的高度开始。

我希望 "name" &lt;th&gt; 中的文本以与 "last name" &lt;th&gt; 相同的高度开始。

  • 键入 &lt;th&gt;NAME &lt;br&gt; &lt;/th&gt; 没有任何作用。
  • 键入 &lt;th&gt;NAME &lt;br&gt; .&lt;/th&gt; 会换行。

为什么会这样?

如果空格在标签之间,是否应该算作内容,从而激活&lt;br&gt; goodness?

如何在 "name" &lt;th&gt; 中实现两行,而第二行没有不必要的字符,或者不必使用 CSS 设置样式?

检查html并启发我

<html>

<body>
  <table border="2px">
    <thead>
      <th>NAME <br> </th>
      <th>LAST<br>NAME</th>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
    </tbody>
  </table>

  <br>

  <table border="2px">
    <thead>
      <th>NAME <br> .</th>
      <th>LAST<br>NAME</th>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

我很好奇 &lt;br&gt; 在另一个标签内时的缺陷行为。

【问题讨论】:

    标签: html encoding html-table line-breaks


    【解决方案1】:

    您可以尝试在它们之间放置一个&amp;nbsp;,它应该可以满足您的需求。

    <th>NAME <br>&nbsp;</th>
    

    或者你可以关闭 br 标签,这应该可以工作

    <th>NAME <br /> </th>
    

    【讨论】:

    • 谢谢,这样可以解决问题。但实际上是什么阻止了
      生效?例如我不需要输入

      Last Name

      来正确编码空格,我只需输入

      Last Name

      。为什么会这样?
    • 我猜这就是解析器解析它的方式。由于您不关闭 br,您也可以尝试
      这应该也可以使用
    • 我将不得不检查有关解析的更多信息,谢谢。我认为自关闭标签只需要在 xhtml 中关闭。
    【解决方案2】:

    使用style="vertical-align:top;"valign="top" 将其顶部对齐

    <html>
    
    <body>
      <table border="2px">
        <thead>
          <th valign="top">NAME</th>
          <th>LAST<br>NAME</th>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
          </tr>
        </tbody>
      </table>
    
      <br>
    
      <table border="2px">
        <thead>
          <th style="vertical-align:top;">NAME</th>
          <th>LAST<br>NAME</th>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
          </tr>
        </tbody>
      </table>
    </body>
    
    </html>

    【讨论】:

    • 很好,我不知道。可悲的是,HTML5 似乎不支持 valign 属性。我可以用 CSS 设置它的样式,但问题实际上是关于为什么
      会这样。
    • 好的。但是如果另一个列标题有 4 行,你会怎么做?你会给3&lt;br/&gt;吗?不是一个好主意,对吧?您必须使用 css 中的样式,这在所有情况下都是安全的
    猜你喜欢
    • 2019-11-27
    • 2015-12-10
    • 2011-11-13
    • 2013-05-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-23
    相关资源
    最近更新 更多