跨瀏覽器兼容滾動表

我想製作佔用屏幕50％的表格。但是，如果有比表格更多的信息，它應該是可滾動的。我一直在嘗試很多不同的方式來做到這一點，但沒有找到工作。它需要跨瀏覽器兼容所有現代瀏覽器，最好是舊瀏覽器。我怎樣才能做到這一點？提前致謝！ Note: I am using w3.css 一些代碼，我曾嘗試：跨瀏覽器兼容滾動表

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

<table class="w3-table-all"> 
 
<thead> 
 
    <tr class="w3-red"> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Points</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Adam</td> 
 
    <td>Johnson</td> 
 
    <td>67</td> 
 
    </tr> 
 
</tbody> 
 
</table>

我已經試過這樣做，但它仍然無法正常工作。我也嘗試過其各種組合，造型tbody，tr，td等。沒有顯示滾動條

來源

2016-11-11 HittmanA

後一些代碼的東西，顯示你正在做的事情 - 至少發佈一個示例表，讓我們沒有做一個幫助你。創建一個代碼片段。你是什麼意思，它不適用於「所有瀏覽器」？用'overflow-y'設置爲'scroll'的表格創建容器 – junkfoodjunkie

我正在投票結束這個問題，因爲這是爲了幫助您編寫標記而不是爲您寫標記。 – Rob

對不起，沒有包含代碼片段。讓我快速編輯@Rob – HittmanA

首先把你的表放入一個div中，然後把你指定的高度和溢出放到該div的類中，這樣它就會成爲可滾動的。

CSS

.table-scroll { 
    border: 1px solid #000; 
    width:50%; 
    height: 100px; 
    overflow-y: scroll; 
}

HTML

<div class="table-scroll"> 
<table class="w3-table-all"> 
<thead> 
    <tr class="w3-red"> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Points</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
</tr> 
<tr> 
    <td>Adam</td> 
    <td>Johnson</td> 
    <td>67</td> 
</tr> 
</tbody> 
</table> 
</div>

這裏是jsfiddle參考。

來源

2016-11-11 03:19:19 user3771102

看起來不錯，但有一個問題：有沒有辦法用固定標題做到這一點？ – HittmanA

如果這是您首先要查找的內容，那麼您應該首先在Google中進行搜索，因爲有很多方法可以使用不同類型的語言進行搜索。閱讀此內容，以便了解如何對其進行編碼。 http://stackoverflow.com/a/17380697/3771102 – user3771102

我做到了。不幸的是我沒有找到。 – HittmanA

跨瀏覽器兼容滾動表

回答

相關問題