如何創建固定高度的全寬表並在Bootstrap中滾動？

我在bootstrap中很新，所以如果我的問題太簡單，我很抱歉。如何創建固定高度的全寬表並在Bootstrap中滾動？

我想創建一個寬度爲父容器，固定高度和滾動條的表，如果表中包含太多的行。

我試圖做這樣的：

<table class="table"> 
    <tbody style="height: 80px; overflow-y: auto;"> 
     <tr><td>1</td></tr> 
     <tr><td>2</td></tr> 
     <tr><td>3</td></tr> 
     <tr><td>4</td></tr> 
    </tbody> 
</table>

這充分顯示錶，全寬，但沒有滾動和高度大於我所需要的。

而且我已經嘗試添加display: block;：

<table class="table"> 
    <tbody style="height: 80px; display: block; overflow-y: auto;"> 
     <tr><td>1</td></tr> 
     <tr><td>2</td></tr> 
     <tr><td>3</td></tr> 
     <tr><td>4</td></tr> 
    </tbody> 
</table>

在這種情況下，滾動條出現，但TR-標籤的寬度不適合的容器，它的短得多。

我也試圖指定width=100%到tr和td標籤沒有運氣。我該如何解決我的任務？

來源

2017-08-08 Fomalhaut

你想在滾動時固定'table-head'嗎？ –

@AbhishekPandey你究竟是什麼意思？我不想爲我的桌子添加標題。 – Fomalhaut

就像這樣，將你的表格包裝在一個div中，然後給高度包裝而不是表格。

.table-wrap { 
 
    height: 80px; 
 
    overflow-y: auto; 
 
}

<div class="table-wrap"> 
 
    <table class="table"> 
 
    <tbody> 
 
     <tr><td>1</td></tr> 
 
     <tr><td>2</td></tr> 
 
     <tr><td>3</td></tr> 
 
     <tr><td>4</td></tr> 
 
     <tr><td>1</td></tr> 
 
     <tr><td>2</td></tr> 
 
     <tr><td>3</td></tr> 
 
     <tr><td>4</td></tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-08-08 08:41:41

謝謝！我工作了。 – Fomalhaut

這很容易，不要忘記標記接受 –

包括在一些分裂的表（格），然後通過CSS樣式施加寬度&高度限制到除法。並設置溢出屬性滾動。

來源

2017-08-08 09:08:22

如何創建固定高度的全寬表並在Bootstrap中滾動？

回答

相關問題