Question

我有一张桌子：

<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）来实现此目的。

非常感谢任何帮助！

感谢您的时间。

Answer 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;}

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

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

2 个答案: