Question

我正在尝试学习css和javascript。我在链接中有这两个表。我尝试添加滚动条，因此一次只能在桌面上显示10个项目。有谁知道怎么做呢？

body
  font-family: 'Helvetica Neue', Helvetica, Arial
  font-size: 14px
  line-height: 20px
  font-weight: 400
  color: #3b3b3b
  -webkit-font-smoothing: antialiased
  font-smoothing: antialiased
  background: #2b2b2b

.wrapper
  margin: 0 auto
  padding: 40px
  max-width: 800px

.table
  margin: 0 0 40px 0
  width: 100%
  box-shadow: 0 1px 3px rgba(0,0,0,0.2)
  display: table
  @media screen and (max-width: 580px)
    display: block

.row
  display: table-row
  background: #f6f6f6
  &:nth-of-type(odd)
    background: #e9e9e9
  &.header
    font-weight: 900
    color: #ffffff
    background: #ea6153
  &.green
    background: #27ae60

  &.blue
    background: #2980b9
  @media screen and (max-width: 580px)
    padding: 8px 0
   display: block
   .cell
     padding: 6px 12px
     display: table-cell
     @media screen and (max-width: 580px)
       padding: 2px 12px
       display: block

http://codepen.io/lukepeters/pen/bfFur

Answer 1

您可以滚动表类，如下面的代码

.table{
  height:250px;
  overflow-y:scroll;
}

您可以设置自己的身高。

Answer 2

您可以为每个表尝试这样的

       <div class="table" style="height:200px; overflow:scroll;">
      .....................
       <div>

Answer 3

要说清楚，您需要为每个表设置 table-container 。

接下来是获得10行的表格高度。

最后，使用table-container

在 overflow-y: scroll 上设置身高

<style>
.table-container {
  height:300px; / Depends on the height of table with 10 columns
  overflow-y:scroll
}
</style>

<div class="table-container">
  <table>
    ..........
  </table>
</div>

在CSS中添加一个滚动条到我的表

3 个答案: