我如何創建一個滾動的HTML表格

我有一個大的HTML表（超過3000個元素），但顯然我不想一次顯示所有。一些表格將被顯示，但其中大部分將全部包含在一個滾動的小框中。我想類似本網站使用了一個表格：stackoverflow search table。我試圖做類似的東西我的代碼does not工作：這裏是一個示例表：我如何創建一個滾動的HTML表格

.table { 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<table id="myTable" class="table"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
</table>

滾動條從來沒有出現在桌子旁邊。我比較新的HTML

來源

2017-04-04 sparpo

你有沒有搜索網站的相關問題？我確信這已被多次詢問。 – epascarello

將'display：block'添加到表格的CSS屬性中。 – davidhu2000

希望這可以幫助：http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – user2087827

<table>元素不尊重溢出屬性。通過設置表強制overflow屬性來阻止：

.table { 
 
    display: block; 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<table id="myTable" class="table"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
</table>

有了那麼大，你會從https://datatables.net/可能帶來:)

來源

2017-04-04 19:13:16 mayersdesign

謝謝你的人，這工作 – sparpo

沒有問題，你可以標記爲正確，祝你有美好的一天。 – mayersdesign

的額外受益的表把它放在一個div內容器。

.container { 
    border: 1px solid #C0C0C0; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100px; 
} 

<div class="container"> 
    <table> 
    ... 
    </table> 
</div>

https://codepen.io/anon/pen/NpmPOy

來源

2017-04-04 19:17:35

嘗試包裝你的表中div標籤，應用類，該div。爲了使實際出現滾動條，你還需要減少你的表格的高度了一下，給你在表中有條目數：

.table { 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<div class="table"> 
 
    <table id="myTable" class="table"> 
 
     <tr class="header"> 
 
     <th style="width:60%;">Name</th> 
 
     <th style="width:40%;">Country</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Berglunds snabbkop</td> 
 
     <td>Sweden</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Island Trading</td> 
 
     <td>UK</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Koniglich Essen</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
    </table> 
 
</div>

來源

2017-04-04 19:22:38 buddacious

我如何創建一個滾動的HTML表格

回答

相關問題