1. 首页
  2. 问答
  3. 显示内的自举响应表：表

显示内的自举响应表：表

2016-09-29 100 views
0

我有一个自举响应table这是在div与CSSdisplay:table。这似乎阻止了表格的响应。如何在不改变外部CSS的情况下使表格响应？显示内的自举响应表：表

JsFiddle

仅供参考，display:table用于创建一个“粘页脚”：How to create a sticky footer that plays well with Bootstrap 3

来源

2016-09-29 user5633550

+0

是显示：表是必须在代码中？ –

+0

是的，如上所述，它使用的粘脚，并不是我可以随时改变的东西 – user5633550

+0

它是响应但你的物品要很长，所以它不会显示其余的表 – SAM

回答

1

如果你不想改变你目前的CSS，使您的文字回应来解决这个问题。
设置font size而不是px使用vm,vw,vh或vmin这些后缀使您的文本响应。 enter image description here

来源

2016-09-29 05:16:30 SAM

+0

设置'font-size：1vmin' on表格工作，但它使文字如此之小，它不可读，这不是一个很好的解决方案 – user5633550

+0

使用'font-size：2vw' – SAM

+0

使用2vw导致表视图太大，并获得整个页面水平滚动 – user5633550

0

试试这个，可能是这将帮助你

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.content-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.table-responsive { 
 
    border: 1px solid #ddd; 
 
    display: -moz-stack; 
 
    margin-bottom: 15px; 
 
    overflow-y: hidden; 
 
    width: 100%; 
 
} 
 

 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="content-container"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Bookings</h3></div> 
 
      <div class="bookings_list"> 
 
      <div class="row"> 
 
       <div class="col-xs-12"> 
 
       <div class="table-responsive"> 
 
        <table class="table table-striped table-hover"> 
 
        <thead> 
 
         <tr> 
 
         <th>ID</th> 
 
         <th>Customer</th> 
 
         <th>Provider</th> 
 
         <th>Agent</th> 
 
         <th>Service</th> 
 
         <th>Status</th> 
 
         <th>Status</th> 
 
         <th>Status</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr class="clickable" action="push" href="/bookings/UY6001"> 
 
         <td>123</td> 
 
         <td>John Smith</td> 
 
         <td>ACME Corp</td> 
 
         <td>Mike</td> 
 
         <td>123456</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         </tr> 
 
         <tr class="clickable" action="push" href="/bookings/UY6000"> 
 
         <td>123</td> 
 
         <td>John Smith</td> 
 
         <td>ACME Corp</td> 
 
         <td>Mike</td> 
 
         <td>123456</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         <td>Active</td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2016-09-29 05:17:19

+0

if你不能看到响应表在这里，只是复制我的代码，并粘贴在记事本，然后尝试 –

+0

这似乎并没有工作 – user5633550

0

设置你的container的宽度基础上，视口，而不是一个百分比值：

@media (max-width: 768px) { 
    .container { 
    width: 100vw; 
    } 
}

Updated Fiddle

由于container是引导程序中相当常见的类，因此您可以考虑将自定义类添加到要添加此样式的特定元素。

来源

2016-09-29 05:28:47

+0

有趣的解决方案，但我似乎仍然得到一点点整个页面水平滚动使用100vw和任何少创造略微有余 – user5633550

相关问题

 相关问题