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

Question

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

我为屏幕截图的上半部分创建了fiddle，其中包含搜索图标（在最左侧）和省略号（在最右侧< /强>）。

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

我为了制作行和搜索图标而使用的HTML代码片段是：

行：

 <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>

问题陈述：

之所以我创建了两个单独的小提琴，因为AS 我在我的电脑上添加表行和列代码（在第二小提琴中提到）后，我看到< / strong> WHITE SPACE AT THE EXTREME RIGHT

我的问题，关于在我的电脑上合并这两个代码（来自2个独立的小提琴），不知怎的，我在电脑上看到最右边的空间 < strong>移动视图，如下所示（标有绿色箭头）。

我想知道，我应该在上面的小提琴中做出什么改变，以便我看不到右边的任何空格。

Answer 1

你的表格根本没有响应。 Bootstrap 4 provides utilities for responsive tables：

  

响应表

     

响应表允许表格水平滚动。通过使用.table打包.table-responsive.，使所有视口都能响应所有视图。或者，使用.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;}