<td> 使用 display: none 时占用空间

Question

我是媒体查询的新手，对 .net 总体来说还很陌生，也许我已经盯着这段代码太久了，所以请善待。

我试图让第一个 td 在最大宽度 775px 处完全消失，并用第二个 td 替换它。似乎第一个 td 刚刚变得“不可见”，但仍在占用空间。 我添加边框仅作为视觉辅助。 任何帮助将不胜感激！

@media screen and (min-width:776px) {
  .hidey {
    border: 1px solid blue;
  }
  .hidey2 {
    display: none;
    border: 1px dashed red;
  }
}
@media screen and (max-width:775px) {
  .hidey {
    border: 1px dashed blue;
    display: none;
  }
  .hidey2 {
    border: 1px solid red;
  }
}

<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em; "><span>td one</span>
    </td>
    <td class="hidey2" style="width: 20em;"><span>td two</span>
    </td>
  </tr>
</table>

View 1

View 2, with unwanted space

Answer 1

标记和语法无效

由于以下原因，您的标记可能存在问题：

• 您在媒体查询前使用 @@media 而不仅仅是 @media，这在大多数情况下都是无效的（在 ASP.NET Razor 视图之类的情况下转义除外）。
• 您的<td> 元素中有关闭的</span> 元素，而没有任何打开的<span> 元素，这也是无效的。

此外，您还可以合并查询：

@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue;  display: none; }
  .hidey2 { border: 1px solid red; }
}

示例

即使在 an MVC Razor View as seen in this interactive example 中，您的示例代码似乎也能按预期工作，并在下面演示：

@media screen and (min-width:776px) {
  .hidey { border: 1px solid blue; }
  .hidey2 { display: none; border: 1px dashed red; }
}
@media screen and (max-width:775px) {
  .hidey { border: 1px dashed blue;  display: none; }
  .hidey2 { border: 1px solid red; }
}

<table>
  <tr>
    <th>Blah:</th>
    <td class="hidey" style="width: 20em; "><span>td one</span></td>
    <td class="hidey2" style="width: 20em;"><span>td two</span></td>
  </tr>
</table>

Answer 2

<style>
    @media only screen {
        .hidey1 {
            display: none;
        }
        .hidey2 {
            display: table;
        }
    }

    @media only screen and (min-width: 775px) {
        .hidey1 {
            display: table;
        }
        .hidey2 {
            display: none;
        }
    }
</style>  

<table>
    <tr>
        <td class="hidey1">td one</td>
        <td class="hidey2">td two</td>
    </tr>
</table>