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

Posted 2023-03-05

【中文标题】如何仅使用 CSS 删除 html <table> 列？

【英文标题】：How to remove an html <table> column using only CSS?

【发布时间】：2016-10-15 03:04:41

【问题描述】：

我有一个包含很多列的 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>

【问题讨论】：

你可以使用display: none;

答案很好。但我会推荐你​​bootstrap。这就是您在 Web 开发中实际处理此类问题的方式。它是跨浏览器安全的，并且有很多优点。

【参考方案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 阅读更多相关信息。

【讨论】：

谁对这个答案投了反对票？它有什么问题？白痴行为？

【参考方案2】：

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

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

【讨论】：

我强烈建议您不要这样做，因为一旦您使用 colspan，它就会中断。此外，如果您这样做，请不要忘记隐藏常规列。 tr > td:nth-child(2) display: none;

【参考方案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 元素内。

【参考方案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>

【参考方案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>

【参考方案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;
     
  

【参考方案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>

【讨论】：

我认为这是一个更好的主意。

【参考方案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>

【参考方案9】：

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