如何在Chrome瀏覽器中支持html表格滾動條？

Question

我需要你的幫助。我有一個有很多列的HTML表格。我已經使用css製作了適合桌面和筆記本電腦屏幕的水平滾動條，並且它在Firefox中得到了支持，並且我想知道爲什麼我的css滾動條編碼在Chrome瀏覽器中不受支持？

這是我的CSS

table.scroll { 
table-layout: fixed; 
display: block; 
overflow-x: scroll; 
} 

和我的HTML代碼，這個例子（這只是一個例子，因爲我有大約超過15列在我的表

<table class="scroll"> 
<tr> 
<td>aaaaaaa</td> 
<tr> 
</table> 

謝謝您幫助... ...（我需要知道這是因爲有些人誰會用我的HTML表格使用Chrome瀏覽器）

Answer 1

首先，你需要確保您要關閉<tr></tr>個標籤正確。

水平滾動條也有鍍鉻的工作，但你必須設置表格的寬度，這樣，當你的數據溢出x軸你有什麼要滾動。

讓我說明：

HTML：

<table class="scroll"> 
<tr> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
    <td>aaaaaaa</td> 
</tr> 
</table> 

CSS：

table.scroll { 
    table-layout: fixed; 
    display: block; 
    overflow-x: scroll; 
    max-width: 100px; 
    } 

CODEPEN DEMO