隐藏表格内容而不将其嵌套在列中

Question

<table style="display:none">
    unhidden text
    <tr>
        <td>
            hidden text
        </td>
    </tr>
</table>

尽管td应用于整个表格，但只隐藏了display: none中的文字。我也可以隐藏unhidden text吗？

Answer 1

<table>个节点仅包含特定元素，不包含文本节点。 对<tr>个节点也是如此。

html表specification显示了这一点。

Answer 2

表格样式必须仅适用于那些可识别的表格标签...

以下是一些选项..使用span标记或div标记，该标记适用于其中的所有元素。

<table style="display:none">
  <span style="display:none">unhidden text</span>
  <tr>
    <td>
        hidden text
    </td>
 </tr>
</table>

或者在我看来是一个更好的解决方案。

<div style="display:none">
  <table>
    unhidden text
   <tr>
    <td>
        hidden text
    </td>
  </tr>
 </table>
</div>

Answer 3

您的HTML无效。不允许将文本节点作为table元素的直接子节点。

浏览器通常会更正您的HTML，因此他们会将其解释为：

unhidden text
<table>
  <tbody>
    <tr>
      <td>
        hidden text
      </td>
    </tr>
  </tbody>
</table>

如您所见，unhidden text已移出table。

所以你应该在table之外放置“unhidden text”，如果你需要样式钩子等，请使用div（或更合适的元素）：

<div>unhidden text</div>
<table>
  <tr>
    <td>
      hidden text
    </td>
  </tr>
</table>