Bootstrap面板內部的表格

我有一個引導面板，它可以在點擊一個圖標時自動關閉它。此面板包含一張全寬的表格，但只有在沒有panel-body的情況下才會顯示。Bootstrap面板內部的表格

例如，此表橫跨面板的整個寬度和高度，看起來不錯，但如果我可以有圍繞桌子的類，我會優先考慮。但是，如果我把東西在那裏，它添加填充它：

<div class="panel panel-default"> 
    <div class="panel-heading">Title Here</div> 
    <table class="table table-bordered table-hover specialCollapse"> 
    .... 
    </table>

的代碼塊具有圍繞桌子的一類，但它再添加填充它和犯規看起來是一樣的：

<div class="panel panel-default"> 
    <div class="panel-heading">Title Here</div> 
    <span class="MyNewClass"> 
     <table class="table table-bordered table-hover specialCollapse"> 
     .... 
     </table> 
    </span> 
</div>

我不介意我能夠使用原始panel-body如果它可以更改爲具有全寬&高度表，如第一個代碼塊。

這裏是一個快速小提琴例如：http://jsfiddle.net/z0y0hp8o/1/

這是最後的結果，我想，但我需要的表panel-body周圍包裹沒有填充。 這需要一個新的類，因爲頁面上的其他面板需要像正常一樣行事。

總之......我需要一個表是裏面的時候全寬度和高度的panel-body

來源

2015-09-19 SBB

嘗試添加以下樣式在您的自定義CSS：

.table > thead > tr > th{ 
    border-right: 1px solid #ddd; 
    border-bottom:0; 
} 

.table > tbody > tr > td{ 
    border-right: 1px solid #ddd; 
} 

.table > thead > tr > th:last-of-type { 
    border-right: 0px; 
} 

.table > tbody > tr > td:last-of-type { 
    border-right: 0px; 
} 

.panel-body { 
    padding: 0; 
} 

.panel-body > .table{margin-bottom:0px;}

提琴手：http://jsfiddle.net/z0y0hp8o/6/

希望以上解決方案會爲你工作。

來源

2015-09-19 21:38:20

這非常接近，表格上仍然有一個外部邊界，需要從中去除面板邊框作爲表格的邊框。 – SBB

我看到了，並在其上工作:) –

我已經更新了小提琴和答案。如果您對此仍有疑問，請回復。 –

有通過引導的面板主體增加了一個默認的樣式表：

.panel-body { 
    padding: 15px; 
}

因此，添加自己的css來替換上面的：

.panel-body { 
    padding: 0; 
}

來源

2015-09-19 21:19:27

還有一堆它繼承的其他東西，比如表格邊距，表格邊框等，當表格直接位於面板內時，它們似乎被忽略。只是添加這一點的CSS不能完全解決我需要的。 – SBB

你想刪除桌子周圍的墊子，不是嗎？它這樣做。 –

這是正確的，我也提供了兩者之間差異的例子。其中一個（你建議的那個）並不是我正在尋找的東西。雖然是的，但它會移動填充，桌子在面板中時與在面板中時不同（邊框，邊距等）。 – SBB

如果您不想從每個面板主體中刪除填充，請添加ID並從中刪除填充。

<div class="panel panel-default"> 
    <div class="panel-heading">Title Here</div> 
     <div id="tablePanelBody" class="panel-body"> 
      <table class="table table-bordered table-hover specialCollapse"> 
       <tr><td>Hello World!</td></tr> 
      </table> 
     </div> 
    </div> 
</div>

然後：

#tablePanelBody { 
    padding: 0; 
}

http://jsfiddle.net/jrnwfgp7/

來源

2015-09-19 21:24:12

嘗試用另一個表元素，醜陋的解決方案替代股利，但它的工作原理。

<table class="panel-body specialCollapse"> 
<table class="table table-bordered table-hover goup"> 
    ...content 
</table> 
</table>

來源

2015-09-19 21:26:19

Bootstrap面板內部的表格

回答

相關問題