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

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>