滚动表格以避免溢出

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>