2016-02-29 144 views
1

我使用靜態(在較低屏幕上滾動時它保持在同一位置),Bootstrap在響應表中固定大小的第一列(100px)。我想要的是使用最小寬度的css(其餘的空間爲100%-100px)其他列具有相同的大小(所以當它響應較低的響應開始工作時)。我不知道多少非靜態列我會有這麼col-md/xs ..是不適當的。Bootstrap響應表列大小

photo有日期的應該共享剩餘空間,但只有最小寬度,例如80px。如果低於那麼響應應該工作。無論如何,我想制定時間表。

代碼源:

<div class="table-responsive"> 
<table class="table table-condensed table-bordered" ng-if="showTable">  
    <thead> 
     <tr style="background-color: #455A64; color: #FFFFFF;"> 
      <th style="background-color:#F5F5F5;"></th> 
      <th ng-repeat="..." ng-if="..." id="{{...}}">{{ ... }}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="..." ng-if="..."> 
      <td style="text-align:center;background-color:#607D8B; color:#FFFFFF">{{ ... }}</td> 
      <td ng-repeat="..." rowspan="{{...}}" ng-if="...">{{ ... }} </td> 
     </tr> 
    </tbody> 
</table> 
<div> 

還有一件事。我不想在td中輸入文字以超過表格邊框。所以它應該適應td的大小。

回答

0

我想通了通過添加:

@media 
only screen and (max-width: 767px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 
    .table-responsive > .table > tbody > tr > td { 
     white-space: inherit; 
     min-width:200px; 
    } 
} 

TNX任何人的幫助。

0

你看看這個(很好)相關的問題和答案嗎?

Bootstrap - how to set up fixed width for <td>?

<tr class="something"> 
    <td class="col-md-2">A</td> 
    <td class="col-md-3">B</td> 
    <td class="col-md-6">C</td> 
    <td class="col-md-1">D</td> 
</tr> 
+0

正如我在問題告訴..的Col-MD和其他人將無法正常工作CAS我不知道有多少TD將在那裏。它依賴於時間表,我從數據庫獲取 –

0

我想我說了你的意思,它可能需要一些調整。 伊莫這一個更好,那麼你的解決方案,因爲這一個檢查屏幕的寬度和調整,你的只是2分辨率的作品。

jsfiddle.net/rffntdht