向表格添加水平和垂直滚动答案

【问题标题】：Adding horizontal and vertical scrolling to a table向表格添加水平和垂直滚动
【发布时间】：2017-06-19 19:01:24
【问题描述】：

我有一张桌子：

<div>
  <div className="shadow-z-1">
    <table className="table table-bordered table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John</td>
          <td>Doe</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jane</td>
          <td>Doe</td>
        </tr>
      </tbody>
    </table>
  </div>
  ...
</div>

我目前正在使用以下样式表对其进行样式设置：

.shadow-z-1 {
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

.table {
  width: 100%;
  max-width: 100%;
  margin-top: 1rem;
  margin-bottom: 2rem;
  background-color: #fff;
  > {
    thead > tr, tbody > tr, tfoot > tr {
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
      text-align: left;
      padding: 1.6rem;
      vertical-align: top;
      border-top: 0;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    thead > tr > th {
      font-weight: 400;
      color: #757575;
      vertical-align: bottom;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }
    caption + thead > tr:first-child > th, colgroup + thead > tr:first-child > th, thead:first-child > tr:first-child > th, caption + thead > tr:first-child > td, colgroup + thead > tr:first-child > td, thead:first-child > tr:first-child > td {
      border-top: 0;
    }
    tbody + tbody {
      border-top: 1px solid rgba(0, 0, 0, 0.12);
    }
  }
  .table {
    background-color: #fff;
  }
  .no-border {
    border: 0;
  }
}

.table-condensed > {
  thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
    padding: 0.8rem;
  }
}

.table-bordered {
  border: 0;
  > {
    thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
      border: 0;
      border-bottom: 1px solid #e0e0e0;
    }
    thead > tr > {
      th, td {
        border-bottom-width: 2px;
      }
    }
  }
}

.table-striped > tbody > tr:nth-child(odd) > {
  td, th {
    background-color: #f5f5f5;
  }
}

.table-hover > tbody > tr:hover > {
  td, th {
    background-color: rgba(0, 0, 0, 0.12);
  }
}

这工作正常，但我现在要做的是在表格中添加垂直和水平滚动。对于垂直滚动，我想保持标题固定，所以我知道我需要给表格主体一个确定的高度，但我不知道我应该在我的样式表中做什么。对于水平滚动，我真的不知道从哪里开始。我希望能够保持所有列的宽度相同，这样如果添加另一个列，而不是被挤压到定义的区域，水平滚动条就会显示出来。

理想情况下，我希望仅使用 css（或在我的情况下为 SaSS）来实现这一目标。

对此的任何帮助将不胜感激！

感谢您的宝贵时间。

【问题讨论】：

标签： css scroll sass html-table

【解决方案1】：

这是一个css代码：

.scroll-table-container {
border:2px solid green; 
height: 300px; 
overflow: scroll;
}
.scroll-table, td, th {
border-collapse:collapse; 
border:1px solid #777; 
min-width: 300px;}

【讨论】：

【解决方案2】：

检查这个例子：

<html>
    <head>
        <style>
            div{display:inline-block;height:46px;overflow:scroll}
            table{background:gray}
            td{background:green}
            td,th{width:100px}
            th{background:orange}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </table>
        <div>
            <table>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Josh</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Joana</td>
                    <td>Doe</td>
                </tr>
            </table>
        </div>
    </body>
</html>

【讨论】：