我不能在桌子上使用垂直卷轴，在容器里不能使用水平卷轴。

Question

我在做一个反应灵敏的桌子。这个表应该垂直滚动(保持头部)，而表内的容器应该水平滚动，以便用户在屏幕太小的情况下滚动容器。

我遇到的问题是，表和它的垂直卷轴工作得很好，但是由于某些原因，我无法水平滚动容器，相反，水平滚动默认出现在页面的末尾(不是容器的末尾，而是页面的末尾)。

在大屏幕上：

​

​

在一个小屏幕上：

​

​

如您所见，条形图出现在页面的末尾。我想让它出现在容器里。就像这样：

​

​

​

.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属性设置为1200 to。删除它并添加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>

​