1. 首頁
  2. 問答
  3. 顯示內的自舉響應表：表

顯示內的自舉響應表：表

2016-09-29 187 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

相關問題

 相關問題