如何在移动视图中避免 css/bootstrap 中的空白？

Question

我有一个如下所示的屏幕截图，我在 CSS/Bootstrap 中复制了它。它在移动和桌面视图中看起来都一样。

我为屏幕截图的上部创建了fiddle，其中有搜索图标（在最左边）和省略号（在最右边）。

我还为屏幕截图的底部创建了fiddle，它有2 行4 列。

我用来制作行和搜索图标的 HTML 代码的 sn-ps 是：

行：

 <tr>
     <th scope="col">Name</th>
     <th scope="col" class="number">Number</th>
     <th scope="col" class="table2">Table</th>
     <th scope="col" class="status">Status</th>
 </tr>

搜索表单：

   <form class="back">
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search" class="extand ">
    </form>

问题陈述：

我创建 两个单独的小提琴的原因是因为 在我的电脑上添加表格行和列代码（在第二个小提琴中提到）后，我看到了 WHITE SPACE AT THE EXTREME RIGHT

我的问题是，在我的电脑上合并这 2 个代码（来自 2 个单独的小提琴）时，不知何故我在我的电脑上看到了 最右边的空间 在移动端视图，如下所示（标有绿色箭头）。

我想知道，我应该在上面的小提琴中进行哪些更改，以便我看不到右侧的任何空格。

Answer 1

您的表根本没有响应。 Bootstrap 4 provides utilities for responsive tables:

响应式表格

响应式表格允许表格轻松水平滚动。通过使用.table-responsive. 包裹.table，使任何表在所有视口中都具有响应性，或者，使用.table-responsive{-sm|-md|-lg|-xl} 选择一个最大断点，以使响应性表达到最高。 […]

你也可以找到这个例子：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Answer 2

.table td.left {
     padding-right: 32%; 
}

这条规则会让你的表体溢出。不建议对表格内容使用填充。您可以考虑在开始时定义表格宽度。

例如.table.td{ width:25%; padding:0px;}