如何在打印模式下隐藏表格列？

Question

如何在打印模式下隐藏整个表格列（使用 JS javascript:print()）？

因为我使用的是 Bootstrap，所以我尝试了它的 .hidden-print 类在打印模式下隐藏最后一列（操作列）：

<table class="table table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th class="hidden-print">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Smith</td>
      <td class="hidden-print">
        <a href="edit.php" role="button" class="btn">Edit</a>
        <a href="delete.php" role="button" class="btn">Delete</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Neo</td>
      <td class="hidden-print">
        <a href="edit.php" role="button" class="btn">Edit</a>
        <a href="delete.php" role="button" class="btn">Delete</a>
      </td>
    </tr>
    <tr>
      <-- continued -->
    </tr>
  </tbody>
</table>

但它只是隐藏列的内容，显示没有内容的列，当我需要时它还隐藏了 TH 和 TD 标签。

可以这样做吗？

Answer 1

table,th,td {
  border: 1px solid;
  text-align: center;
}
table {
  border-collapse: collapse;
  width: 100%;
}
@media print {
  table,th,td {
    border: 0px
  }
  button {
    display: none;
  }
}

<table class="table table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th class="hidden-print">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Smith</td>
      <td class="hidden-print">
        <a href="edit.php" role="button" class="btn">Edit</a>
        <a href="delete.php" role="button" class="btn">Delete</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Neo</td>
      <td class="hidden-print">
        <a href="edit.php" role="button" class="btn">Edit</a>
        <a href="delete.php" role="button" class="btn">Delete</a>
      </td>
    </tr>
    <tr>
      
    </tr>
  </tbody>
</table>
<button onclick="window.print();">Print</button>

Answer 2

将display: none;（.hidden-print 所做的事情）添加到表格行和单元格存在问题，因为从文档流中删除它们很容易弄乱表格格式 (see this question)。

改用visibility: hidden; 怎么样？

在您的情况下，如果您想始终以最后一列为目标，您可以试试这个：

@media print {
  th:last-child, td:last-child {
    visibility: hidden;
  }
}