Bootstrap - 如何正確排列兩個tbody的？

我有一個問題，排隊表不能正常工作，我想知道是否有人處理過這樣的事情。我查了一下，但找不到解決它的任何問題。我正在使用AngularJS和嵌套的ng-repeats，這就是爲什麼我遇到了一些麻煩（並且需要將它們嵌套在表格中）。我的代碼如下：Bootstrap - 如何正確排列兩個tbody的？

<table class="table table-condensed table-hover table-responsive"> 
      <thead><tr> 
       <th class="col-sm-4">1</th> 
       <th class="col-sm-3">2</th> 
       <th class="col-sm-3">3</th> 
      </tr></thead> 
      <tbody ng-repeat="blah in blah"> 
      <tr ng-repeat="blah2 in blah"> 
       <td>......</td> 
      </tr> 
      </tbody> 
      <!--This is the end of "Table 1" in the diagram below--> 
      <tbody ng-repeat="blah3 in blah4"> 
      <tr ng-repeat="blah5 in blah6"> 
       <td>.........</td> 
      </tr> 
      </tbody> 
      <!--This is the end of "Table 2" in the diagram below--> 
      </table>

我結束了這樣的結果（注意，我不得不動用它由於我使用的表數據是敏感的信息）：

我怎樣才能拉第二個tbody（小一個）旁邊的第一個？

謝謝

來源

2015-09-02 Jerry

您需要2個表... – Julo0sS

你想對齊列或只是表格的寬度？ – Thorarins

@ Thorarins寬度本身 – Jerry

如果我正確地理解了你，你可以簡單地使用Bootstrap的列作爲表格的容器。例如：

div.col-md-6

將兩列一起渲染直到屏幕崩潰。

https://jsfiddle.net/DTcHh/11692/

來源

2015-09-02 06:56:17

我接受了你的建議這很好。除了表格是兩種不同的尺寸，所以它們不能正確排列。有沒有辦法「伸展」（身高）以適合其他列 – Jerry

當然可以。事實上，有很多不同的方法可以做到這一點，這完全取決於您的偏好。您可以同時拉伸較短的表的行，直到較短的表的高度與較高的表相匹配。雖然在我看來，它會看起來非常可怕，視覺上明智。其中一種方法是在較短的表格上顯示一個空單元格，例如檢查更新的小提琴：https：//jsfiddle.net/DTcHh/11694/ –

爲什麼不使用網格系統的bootstrap？

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
</div>

我不知道你想放在桌子上但你可以把它放到網格系統中。 link to doc

來源

2015-09-02 06:49:52

這很好，我正在考慮這樣做，但有沒有辦法讓它像桌子一樣？我可以只使用表類嗎？ – Jerry

這可行，但對我來說，這不是一個解決方案，因爲你不能像使用表一樣使用它。使用2個帶有網格系統類的獨立表格可以做到這一點。順便說一句，如果你想風格它像一個表只需添加一個自定義類像「tableLike」，並去bootstrap.css文件獲得「表」或「表懸停」或「...表 - 無論」類的樣式，並將其複製/粘貼到您的自定義類樣式中... – Julo0sS

您可以在邊框上應用div的額外類：1px solid＃E1E1E1;例如。但是，如果你想要的表只需使用一個這樣的：<表類= 「表表懸停表冷凝表條紋」>34 –

Bootstrap - 如何正確排列兩個tbody的？

回答

相關問題