Bootstrap 4响应表不会占用100%的宽度

我正在使用Bootstrap 4构建一个Web应用程序并遇到一些奇怪的问题.我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表.在桌面设备上,表格应占据包含DIV宽度的100%.

一旦我将.table-responsive类应用到我的表中,表就会水平缩小,不再占用宽度的100%.有任何想法吗？

这是我的标记:

    
    
    
    
    
    


    
 
        

            

                

                    

                        

                            
Priority
                            
Origin
                            
Destination
                            
Mode
                            
Date
                            
Action
                         
                      
                      

                          

                              
0
                              
PHOENIX, AZ
                              
SAN DIEGO, CA
                              
DRIVING
                              
2017-01-15 13:59:00
                              

                          
                          

                              

                          
                      
                  
              
           
           

        
        
        
     

如果我将100%宽度应用于.table-responsive类,它会使表本身为100%宽,但子元素(TBODY,TR等)仍然很窄.

以下将不起作用.它引起了另一个问题.现在它将实现100%的宽度,但它不会对较小的设备做出响应:

.table-responsive {
    display: table;
}

所有这些答案通过推荐引入了另一个问题display: table;.目前唯一的解决方案是将其用作包装器:

  
...
 

这个解决方案对我有用:

只需在表元素中添加另一个类: w-100 d-block d-md-table

所以它会是:

for bootstrap 4 w-100将宽度设置为100%d-block(显示:块)和d-md-table(显示:最小宽度表:576px)

Bootstrap 4显示文档

如果您使用的是V4.1,并且根据他们的文档,请不要直接将.table-responsive分配给表.该表应该是.table,如果您希望它可以水平滚动(响应),请将其添加到.table响应容器(