如何仅使用 CSS 删除 html <table> 列？

Question

我有一个包含很多列的 HTML <table>，所以当我的网页在移动浏览器上显示时，它太小了。所以我正在创建一个媒体查询，我想删除一些列（这并不重要）。

那么如何仅使用 css 删除 html 列？

例如下一个例子中如何去掉表格中间的“B”列：

table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

<table>
<th>A</th>
<th>B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

由于每个人都直截了当，我想向您推荐 bootstrap - 这在处理响应式设计时会在许多情况下为您提供帮助。安装后，你将不得不像这样修改你的代码：

<table>
  <tr>
    <th>A</th>
    <th class="hidden-xs">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden-xs">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hidden-xs">Jackson</td> 
    <td>94</td>
  </tr>
</table>

您可以在this question 阅读更多相关信息。

Answer 2

您可以使用第 n 个子项来管理表列。

th:nth-child(2) { display:none; }

Answer 3

要删除第二列：

table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
}

table,
th,
td,
tr {
  border: 1px solid black;
}

table {
  width: 100%;
}

@media (max-width: 900px){ /* use your media breakpoint */
  table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
  }
}

<table>
  <tr>
    <th>A</th>
    <th id="foo">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

JSFiddle

注意：您的 HTML 无效 - th 也必须在 tr 元素内。

Answer 4

使用 css :nth-child() 和内部媒体查询编写样式来隐藏列：

table, th, td, tr{
  border:1px solid black;
}

table {
  width:100%;
}

@media all and (max-width: 768px){
  table tr th:nth-child(2),
  table tr td:nth-child(2) {
    display: none;
  }
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </tbody>
</table>

Answer 5

<style>
        table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

  @media (max-width: 768px){

    tr th:nth-child(2),tr td:nth-child(2){

      display:none;
    }

  }
    </style>

Answer 6

如果您使用 nth-child，稍后添加/删除更多 th/td 时会出现问题。最好使用可以在整个应用程序中重用的类。

---

<table>
<th>A</th>
<th class="hide-on-mobile">B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td class="hide-on-mobile">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hide-on-mobile">Jackson</td> 
    <td>94</td>
  </tr>
</table>

@media (max-width: 768px){
    hide-on-mobile{
      display:none;
    } 
  }

Answer 7

不是你想要的，但是让表格水平滚动怎么样？

如果您使用overflow-x: auto，则只有在窗口无法容纳内容时才会出现滚动条。

table,
th,
td,
tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
.hscroll {
  overflow-x: auto;
}
.example {
  white-space: nowrap;
}

<div class="hscroll">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 8

正确的方法是使用col 元素和visibility: collapse。

<colgroup>
  <col />
  <col />
  <col />
</colgroup>

col:nth-child(2) {
  visibility: collapse;
}

table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
col:nth-child(2) {
  visibility: collapse;
}

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

即使你使用colspan，这种方式也能正常工作。

但是，请注意表格的布局将在隐藏列之前进行计算。最后，剩余的列不会增长以使表尊重width: 100%。如Dynamic effects 中所述，这避免了昂贵的重新布局操作。为了弥补这一点，您可以将表格的宽度增加到 100% 以上。

div {
  overflow: hidden;
  margin: 20px 0;
}
table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
  table-layout: fixed;
}
table.grow {
  width: 150%;
}
col.hidden {
  visibility: collapse;
}

<div>
  Full table
  <table>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column
  <table>
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column and enlarging table
  <table class="grow">
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 9

如果您必须使用 html 表格，我建议您使用 stacktable.js。否则使用 css 显示表格。