我不能在表中使用“垂直滚动”，也不能在该表所在的容器中使用“水平滚动”

Question

我正在创建一个响应表。该表应垂直滚动（保持thead），并且该表所在的容器应水平滚动，以使用户可以在屏幕太小时滚动该容器。

我遇到的问题是表格及其垂直滚动可以完美地工作，但是由于某种原因，我无法水平滚动容器，相反，水平滚动默认情况下显示在页面的末尾（而不是容器的末尾，在页面的最后）。

在大屏幕上：

在小屏幕上：

如您所见，该栏显示在页面末尾。我希望它出现在容器内。就像这样：

.container {
border: 1px solid #e0dddddc;
padding: 10px;
min-width: 1200px;
overflow-x: scroll;
}

.table-container {
border: 1px solid #e0dddddc;
width: 100%;
border-spacing: 0;
table-layout: fixed;
border-collapse: collapse;
}

.table-container tbody {
display: block;
width: 100%;
height: 100px;
overflow-y: auto;
}

.table-container thead {
display: block;
width: 100%;
}

.table-container tbody tr {
transition: .3s ease;
}

.table-container tbody tr:hover {
background-color: #e0dddddc;
}

.table-container thead tr {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}

.table-container thead tr, .table-container tbody tr {
display: flex;
flex-direction: row;
justify-content: baseline;
}

.table-container th, .table-container td {
padding: 5px;
text-align: left;
width: 100%;
}

.table-container th {
padding: 13px 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
min-width: 180px;
}

.table-container td {
padding: 10px 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
min-width: 180px;
}

/* Just for test */

.text-box {
margin-top: 10px;
height: 200px;
width: 100%;
border: 1px solid #e0dddddc;
min-width: 180px;
}

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./scrollable-table.css" />

  <div class="container">
<table class="table-container">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-5</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
      <td>row 2-5</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
      <td>row 3-5</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
      <td>row 4-5</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
      <td>row 5-5</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
      <td>row 6-5</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 7-5</td>
    </tr>
  </tbody>
</table>
<div class='text-box'></div>
  </div>

更新

我取得了一些进展，现在栏出现在容器内。但是元素现在被破坏了。它无法水平到达页面末尾：

.container {
    display: inline-block;
    border: 1px solid #e0dddddc;
    padding: 10px;
    overflow-x: auto;
}

.table-container {
    border: 1px solid #e0dddddc;
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-container tbody {
    display: block;
    height: 100px;
    overflow-y: auto;

    overflow-x: hidden;
}

.table-container thead {
    display: block;
}

.table-container tbody tr {
    transition: .3s ease;
}

.table-container tbody tr:hover {
    background-color: #e0dddddc;
}

.table-container thead tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.table-container thead tr, .table-container tbody tr {
    display: flex;
    flex-direction: row;
    justify-content: baseline;
}

.table-container th, .table-container td {
    padding: 5px;
    text-align: left;
}

.table-container th {
    padding: 13px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 180px;
}

.table-container td {
    padding: 10px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 180px;
}

/* Just for test */

.text-box {
    margin-top: 10px;
    height: 200px;
    width: 100%;
    border: 1px solid #e0dddddc;
    min-width: 180px;
}

Answer 1

您的.container的min-width属性设置为1200px。 删除它并添加一个overflow-x属性应该可以解决您的问题。

.container {
    border: 1px solid #e0dddddc;
    padding: 10px;
    overflow-x: auto;
}

.table-container {
    border: 1px solid #e0dddddc;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-container tbody {
    display: block;
    height: 100px;
    overflow-y: auto;
}

.table-container thead {
    display: block;
}

.table-container tbody tr {
    transition: .3s ease;
}

.table-container tbody tr:hover {
    background-color: #e0dddddc;
}

.table-container thead tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.table-container thead tr, .table-container tbody tr {
    display: flex;
    flex-direction: row;
    justify-content: baseline;
}

.table-container th, .table-container td {
    padding: 5px;
    text-align: left;
}

.table-container th {
    padding: 13px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 180px;
}

.table-container td {
    padding: 10px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 180px;
}

/* Just for test */

.text-box {
    margin-top: 10px;
    height: 200px;
    width: 100%;
    border: 1px solid #e0dddddc;
    min-width: 180px;
}

<body>
  <div class="container">
    <table class="table-container">
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row 1-0</td>
          <td>row 1-1</td>
          <td>row 1-2</td>
          <td>row 1-3</td>
          <td>row 1-4</td>
          <td>row 1-5</td>
        </tr>
        <tr>
          <td>row 2-0</td>
          <td>row 2-1</td>
          <td>row 2-2</td>
          <td>row 2-3</td>
          <td>row 2-4</td>
          <td>row 2-5</td>
        </tr>
        <tr>
          <td>row 3-0</td>
          <td>row 3-1</td>
          <td>row 3-2</td>
          <td>row 3-3</td>
          <td>row 3-4</td>
          <td>row 3-5</td>
        </tr>
        <tr>
          <td>row 4-0</td>
          <td>row 4-1</td>
          <td>row 4-2</td>
          <td>row 4-3</td>
          <td>row 4-4</td>
          <td>row 4-5</td>
        </tr>
        <tr>
          <td>row 5-0</td>
          <td>row 5-1</td>
          <td>row 5-2</td>
          <td>row 5-3</td>
          <td>row 5-4</td>
          <td>row 5-5</td>
        </tr>
        <tr>
          <td>row 6-0</td>
          <td>row 6-1</td>
          <td>row 6-2</td>
          <td>row 6-3</td>
          <td>row 6-4</td>
          <td>row 6-5</td>
        </tr>
        <tr>
          <td>row 7-0</td>
          <td>row 7-1</td>
          <td>row 7-2</td>
          <td>row 7-3</td>
          <td>row 7-4</td>
          <td>row 7-5</td>
        </tr>
      </tbody>
    </table>
    <div class='text-box'></div>
  </div>
</body>

</html>