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

您无法设置溢出以滚动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%)的组合来使内联块居中。

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

在表中滚动以避免溢出

2 个答案: