滾動表格以避免溢出

Question

table { 
    width: 300px; 
    height: 100px; 
    /*position:absolute;top: 40%;left: 42%;*/ 
    position:absolute; 
    top: 47%; 
    left: 3%; 
    overflow: scroll; 
    border-collapse: collapse; 
} 

th, td { 
    border-bottom: 1px solid #ddd; 
    text-align: left; 
    max-width: 10px; 
    word-wrap:break-word; 
    padding: 5px; 
} 

tr:hover { 
    background-color:#a3d1ff 
} 

此CSS代碼無法將滾動條添加到我的表...任何幫助？ 當我添加更多的數據到表中它的大小增加如何使穩定

Answer 1

你不能設置溢出滾動的display: table，這是<table>元素的默認元素。嘗試將表格的顯示設置爲display: block。

table { 
    width: 300px; 
    height: 100px; 
    /*position:absolute;top: 40%;left: 42%;*/ 
    position:absolute;top: 47%;left: 3%; 
    overflow: scroll; 
    border-collapse: collapse; 
    display: block; /* I added this line */ 
} 

退房的例子：https://jsfiddle.net/oez0488h/48/

Answer 2

如果你想有一個可以滾動的表，你可以添加一個包裹元素和滾動條添加到它，如下圖所示。

在.table-wrap上，設置值爲height和overflow: auto以根據需要顯示滾動條。如果您希望塊具有收縮至包裹寬度，請使用display: inline-block。

您可以使用margin-left: 50%然後CSS變換translateX(-50%)的組合中心內聯塊。

table td { 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: center; 
 
} 
 
.table-wrap { 
 
    border: 1px dotted blue; 
 
    height: 300px; 
 
    overflow: auto; 
 
    display: inline-block; 
 
    margin-left: 50%; /* if you want to center the table horizontally */ 
 
    transform: translateX(-50%); 
 
}

<div class="table-wrap"> 
 
    <table border="1"> 
 
    <tr> 
 
    <td>Text 1.1</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 1.2</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 1.3</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 1.4</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 1.5</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 1.6</td> 
 
    <td>Text 2</td> 
 
    <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    <td>Text 5</td> 
 
    </tr> 
 
    </table> 
 
</div>