Question

我有一个普通的HTML表格。我希望当我在移动电话中时，除了第二列之外，所有的colums都会消失。我怎么能这样做？

我看到了负责人表，他们将所有列合并为一个，但我希望其他列消失。感谢

Answer 1

全屏查看并调整窗口大小...

这将隐藏所有td，除了那些是他们父母的第二个孩子（即：第2列）：

@media (max-width: 600px) {
  td:not(:nth-child(2)) {
    display: none;
  }
}

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

Answer 2

当分辨率小于某个点时，您应该使用Media queries将不同的样式应用于要禁用的列

示例

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { .specialColumn { display:none; }

Answer 3

媒体查询将为您完成此操作：

HTML：

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

CSS：

@media (max-width: 479px) {
  table tr td:nth-child(1), table tr td:nth-child(3) {
    display: none;
  }
}

这是一个小提琴，我用n号子选择器只选择第一列和第三列：https://jsfiddle.net/pqp11dqe/

Answer 4

尝试使用媒体查询。像这样：

@media only screen and (max-width: 500px /*max width of smaller screen*/) {
    .classOfColumnsToHide {
        display:none;
    }
}

Answer 5

如果你要开发和使用手机，你会想看bootstrap css它会对你有很大的帮助，并且不需要大量的手动css编码。它也将解决您当前的问题，从长远来看，您可能最终会喜欢使用它。

CSS仅显示媒体中表的一列

5 个答案: