html - 为什么 "display:none"还在占用空间？

Question

我试图在移动设备上查看 HTML 页面时使表格中的特定单元格消失，而在 PC 上的宽度为 20%，但是当我在移动设备上查看时，表格单元格不可见 但仍然占用空间。我在网上发现很多人说 display:none 不是为了占用空间，但我似乎无法得到那个结果。

<style type="text/css">
  .mobileHide {display: inline; width : 20%;}
				
  @media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px){
    .mobileHide {
      display : none;
      width : 1% !important;
      overflow : hidden;
    }
  }
</style>
<table>
  <tbody>
    <tr>
      <div class="mobileHide">
        <td>
          This cell is meant to be 20% wide on PC but non-existent on mobile.
        </td>
      </div>
      <td>
        This cell is meant to be 60% wide on PC and 100% wide on mobile.
      </td>
      <div class="mobileHide">
        <td>
          This cell is meant to be 20% wide on PC but non-existent on mobile.
        </td>
      </div>
    </tr>
  </tbody>
</table>

如果有人能够帮助我解决这个问题，那就太好了。

Answer 1

您的标记无效。像 <div> 这样的 block 元素不能是 <tr> 的 child ;此上下文中唯一有效的元素是 <td>和 <th> .

在 Google Chrome 中，此标记被重新解释以放置 <div>文档主体根部的元素，例如

<div class="mobileHide"></div>
<div class="mobileHide"></div>
<table>
  <tr>
    <td>
      This cell is meant to be 20% wide on PC but non-existent on mobile.
    </td>
    <td>
      This cell is meant to be 60% wide on PC and 100% wide on mobile.
    </td>
    <td>
      This cell is meant to be 20% wide on PC but non-existent on mobile.
    </td>
  </tr>
</table>

如果您想在移动设备上隐藏表格单元格，请应用 mobileHide直接对表格单元格进行分类。