Question

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

通过崩溃我的意思是：隐藏不适合单元格内容的部分内容。

我该怎么做？

HTML：

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

的CSS：

glob

Answer 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>

html表 - 折叠除一列之外的所有列

1 个答案: