html bootstrap 中的表格不适合屏幕

Question

我在 html bootstrap 中有一个表格，该表格在页面加载时看起来很合适，但在页面完全加载后表格变得可滚动

我的代码是：

<div class="table-responsive">
  <table class="table table-striped table-borderd" id="orderTable">
    <thead>
      <tr>
        <th>S.No</th>
        <th>Order ID</th>
        <th>Ordered By</th>
        <th>Branch name</th>
        <th>Order Date </th>
        <th>Order Time </th>
        <th>Status</th>
        <th>Invoice Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="sn">
        <th>S.No</th>
        <th>Order ID</th>
        <th>Ordered By</th>
        <th>Branch name</th>
        <th>Order Date </th>
        <th>Order Time </th>
        <th>Status</th>
        <th>Invoice Status</th>
        <th>Actions</th>
      </tr>

    </tfoot>
    <tbody>
    </tbody>
  </table>
</div>

谁能告诉我如何使它适合屏幕并避免滚动。提前致谢

Answer 1

事实证明，这种情况下的主要问题是 <input/> 元素的宽度，这使得我们所有的列都遵循相同的宽度。

我已经使用Desktop Screen 的以下 CSS 解决了这个问题。对于较小的屏幕，最好有滚动条，以免丢失任何数据。

@media (min-width:1320px{  
    tfoot th input {
        width: 90px !important;
    }
}

稍后您可以根据需要调整此设置以实现更大的屏幕断点。