html table - 折叠除一列之外的所有内容

【问题标题】：html table - collapse all but one columnhtml table - 折叠除一列之外的所有内容
【发布时间】：2018-02-18 22:37:40
【问题描述】：

我有一个包含几列的 html 表。如果表格不适合水平放置在页面中，我希望除一列之外的所有列都折叠（而不是在页面上显示水平滚动条）。

折叠我的意思是：隐藏不适合单元格的内容部分。

我该怎么做？

html:

<table>
  <tr>
    <td>this can collapse</td>
    <td>this can collapse</td>
    <td class="nocollapse">this should not collapse</td>
    <td>this can collapse</td>
  </tr>
</table>

css:

table {
  width: 100%;
  max-width:100%;
}
td {
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
}
td.nocollapse {
  overflow: none;
}

【问题讨论】：

标签： html css html-table

【解决方案1】：

该按钮仅显示折叠列的脚本的效果。如果屏幕宽度太小，请使用按钮的onclick函数代码。

<!DOCTYPE html>
<html>
  <head>
    <style>
      tr,  td {border:solid 1px black;padding:3px;}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td class="collapse">this can collapse</td>
        <td class="collapse">this can collapse</td>
        <td>this should not collapse</td>
        <td class="collapse">this can collapse</td>
      </tr>
    </table>
    <button onclick="for (var el of document.querySelectorAll('td.collapse'))el.style.display='none';">Collapse</button>
  </body>
</html>

如果你使用 jQuery，这会变得更容易，按钮看起来像：<button onclick="$('td.collapse').hide();">Collapse</button>

【讨论】：