Question

我正在尝试将垂直和水平滚动条添加到我的表中，但是，我尝试了很多来自互联网的教程，但这些教程似乎都不适合我。

如何使用CSS添加垂直和水平滚动条？

<div class="tablecontainer">
  <div class="table" >
    <table cellspacing='0'>
      <thead>
        <tr>
          <th>Tutor Name </th>
          <th>Tutor NRIC</th>
          <th>Tutor ID</th>
          <th>Tutor Email</th>
          <th>Tutor qualification</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jane</td> 
          <td>1234567</td>
          <td>Jane@gmail.com</td>
          <td>Diploma</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

添加水平和垂直滚动条的最简单的解决方案是，

将类table添加到要显示滚动条的表中，并在CSS部分（或外部样式表）中包含以下内容

.table {
  display: inline-block;
  overflow-x : scroll;
  overflow-y: scroll;
}

或者，您也可以手动指定height和width。

我使用两个滚动条的代码创建了CodePen。

希望这会有所帮助。：）

Answer 2

对于垂直滚动，请确保css中有nowrap属性，以防止在调整大小时包装表。

    td {
       white-space: nowrap;
    }

对于水平缩放，请确保将css中的overflow设置为“滚动”以及表格内容的height属性。

    .scrollContent {
        height: 170px
        overflow-y: scroll;
    }

以下是http://www.imaputz.com/cssStuff/bigFourVersion.html表格的修改版本的jsfiddle，包括垂直滚动：https://jsfiddle.net/yv193jmy/

Answer 3

你有什么尝试？最简单的是添加

.table {
  overflow : scroll;
}

到你的CSS

在表体内添加滚动条

3 个答案: