Question

我有一个包含表格的布局。如果表中包含的数据宽度足以离开屏幕，我希望包含表格的div水平增长。当数据垂直离开屏幕而不是水平时，它当前有效。这是代码：

#main-content {
  display: flex;
  background-color: lightblue;
}
#field-selection-area {
  flex-shrink: 0;
  border: 1px #AAAAAA solid;
  background-color: aliceblue;
}
#field-selection-area ul {
  list-style: none;
  padding: 4px;
  margin: 0;
}
#field-table-area {
  border-right: 1px #AAAAAA solid;
  border-bottom: 1px #AAAAAA solid;
}
.field-area {
  border-top: 1px #AAAAAA solid;
  padding: 4px;
}
#table-area {
  border-top: 1px #AAAAAA solid;
}
#table-area table td {
  border: 1px #AAAAAA solid;
}

<div id="main-content">
  <div id="field-selection-area">
    <ul class="no-text-selection">
      <li>Period</li>
      <li>Market</li>
      <li>Trade ID</li>
    </ul>
  </div>

  <div id="field-table-area">
    <div id="field-config-area">
      <div id="filter-field-area" class="no-text-selection field-area">
        Drop Filter Fields Here
      </div>

      <div id="row-field-area" class="no-text-selection field-area">
        Drop Row Fields Here
      </div>

      <div id="column-field-area" class="no-text-selection field-area">
        Drop Column Fields Here
      </div>
    </div>

    <div id="table-area">
      <table>
        <tr>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
        </tr>
      </table>
    </div>
  </div>
</div>

当屏幕足够宽时，它可以正常工作：

Working when screen is wide enough 但是，如果我调整屏幕大小然后滚动，则会发生以下情况：

Not working when screen size too small 在上图中，我略微向右滚动。我想把桌子完全收容。有谁知道怎么做？

Answer 1

您可以在桌面区域使用overflow：auto：

#table-area{
    border-top: 1px #AAAAAA solid;
    overflow:auto;
}

<强>演示：

#main-content{
    display: flex;
    background-color: lightblue;
}

#field-selection-area{
    flex-shrink: 0;
    border: 1px #AAAAAA solid;
    background-color: aliceblue;
}

#field-selection-area ul{
    list-style: none;
    padding: 4px;
    margin: 0;
}

#field-table-area{
    border-right: 1px #AAAAAA solid;
    border-bottom: 1px #AAAAAA solid;
}

.field-area {
    border-top: 1px #AAAAAA solid;
    padding: 4px;
}

#table-area{
    border-top: 1px #AAAAAA solid;
    overflow:auto;
}

#table-area table td{
    border: 1px #AAAAAA solid;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Pivot Web</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>

<div id="main-content">
    <div id="field-selection-area">
        <ul class="no-text-selection">
            <li>Period</li>
            <li>Market</li>
            <li>Trade ID</li>
        </ul>
    </div>

    <div id="field-table-area">
        <div id="field-config-area">
            <div id="filter-field-area" class="no-text-selection field-area">
                Drop Filter Fields Here
            </div>

            <div id="row-field-area" class="no-text-selection field-area">
                Drop Row Fields Here
            </div>

            <div id="column-field-area" class="no-text-selection field-area">
                Drop Column Fields Here
            </div>
        </div>

        <div id="table-area">
            <table>
                <tr>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                </tr>
            </table>
        </div>
    </div>
</div>

</body>
</html>

如何让div在屏幕上水平增长

1 个答案: