html - 在表格中滚动以避免溢出

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 代码无法将 scrol 添加到我的表中...有什么帮助吗？？ 当我向表中添加更多数据时，它的大小会增加。如何使表稳定

Answer 1

如果你想要一个可以滚动的表格，你可以添加一个包裹元素，并在上面添加滚动条，如下所示。

在 .table-wrap 上，为 height 和 overflow: auto 设置一个值以根据需要显示滚动条。如果您希望 block 具有收缩包装宽度，请使用 display: inline-block。

您可以结合使用 margin-left: 50% 和 CSS 转换 translateX(-50%) 将内联 block 居中。

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>