Bootstrap 表在打印时显示灰色水平滚动条

Question

我正在尝试打印带有引导表的网页。但是当我按 command/ctrl + P 时，会出现水平滚动条。我不明白它来自哪里。

我可以看到桌子下面有一些空间（蓝色棚子内）。这就是滚动条出现的地方。

按 command/ctrl + P 后，我得到类似这样的信息。

如何摆脱这个滚动条？

这是一个非常简单的例子。不过，这里是代码。

@page {
  size: auto;
  margin: 7mm;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&amp;display=swap">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/@bootstrapstudio/bootstrap-better-nav/dist/bootstrap-better-nav.min.css">

<div class="row mt-3">
  <div class="col">
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <tbody>
          <tr>
            <td class="font-weight-bold f14" style="border: 1px solid #dee2e6;">Total Paid
            </td>
            <td>$ 5,023.00</td>
          </tr>
          <tr>
            <td class="font-weight-bold f14" style="border: 1px solid #dee2e6;">Invoice Date
            </td>
            <td class="f14" style="border: 1px solid #dee2e6;">11-11-2022</td>
          </tr>
          <tr>
            <td class="font-weight-bold f14" style="border: 1px solid #dee2e6;">Invoice #</td>
            <td class="f14" style="border: 1px solid #dee2e6;">11</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

实际上，这是一个滚动条。所以我试图隐藏它并且它起作用了。要从表格中删除滚动条，请将此 CSS 添加到该表格中。

element.style {
    overflow-x: visible;
}

它应该消失