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

将go vet（这是display: none;所做的）添加到表格行和单元格时会出现问题，因为从文档流程中删除它们很容易搞乱表格格式化（see this question ）。

如果使用.hidden-print呢？

在您的情况下，如果您希望始终定位最后一列，则可以尝试此操作：

visibility: hidden;

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

2 个答案: