Html 在表格中滚动以避免溢出

此css代码无法将scrol添加到我的表中…有任何帮助吗？？

---

当我向表中添加更多数据时，表的大小会增加。如何使稳定您不能将溢出设置为滚动显示

显示：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;
}

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

tr:hover {
    background-color:#a3d1ff
}

---

查看示例：

如果希望有一个可以滚动的表，可以添加一个包装元素并向其中添加滚动条，如下所示

在

.table wrap

上，设置

高度

和

溢出：自动

的值，以根据需要显示滚动条。如果希望块具有收缩到包裹宽度，请使用

display:inline block

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
}

您可以使用

左边距：50%

和CSS转换

translateX（-50%）

组合将内联块居中

表td{
高度：100px；
宽度：100px；
文本对齐：居中；
}
.桌套{
边框：1px点蓝色；
高度：300px；
溢出：自动；
显示：内联块；
左边距：50%；/*如果要使表格水平居中*/
转化：translateX（-50%）；
}

案文1.1
文本2
文本3
文本4
文本5
案文1.2
文本2
文本3
文本4
文本5
案文1.3
文本2
文本3
文本4
文本5
案文1.4
文本2
文本3
文本4
文本5
案文1.5
文本2
文本3
文本4
文本5
案文1.6
文本2
文本3
文本4
文本5

根据CSS规范，

表将水平和垂直展开以显示所有内容。
高度
值被视为最小值，
最大高度
无效。