如何使 div 适应所有可用宽度，甚至隐藏在滚动条中？

Question

我有一个包含两个面板的页面。第二个面板包含一些大的 table，因此即使包含包装内容也无法全宽显示 window。我添加了一个水平滚动条来解决这个问题，但似乎 div 不想适应大尺寸 table。

经过一些研究，我发现了如何通过此 css 更改强制第二个面板适应 table 大小：

.pane {
  display: table;
}

updated fiddle link

但是还有一个问题。第一和第二面板的宽度不同。如何强制第一个面板采用所有可用宽度，即使它隐藏在水平滚动中？

是否有任何纯粹的 html/css 解决方案？

Answer 1

它不是纯粹的 html/css 解决方案，但它有效

我已经使用 jquery 获取第二个的宽度并将其应用于第一个

$('#pane1').width($('#pane2').width())

.list {
  overflow-x: auto;
}
.pane {
   border: 1px solid red;
   width: 100%;
   margin: 15px 0;
   display: table;
}

.pane .head {
  width: 100%;
  background: #959595;
}

.pane .body {
  width: 100%;
}

.pane .body table {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="pane" id="pane1">
    <div class="head">
      Pane 1 header
    </div>
    <div class="body">
      Some body
    </div>
  </div>
  <div class="pane" id="pane2">
    <div class="head">
      Pane 2 header
    </div>
    <div class="body">
      <table width="100%">
      <tbody>
        <tr>
          <td>First</td>
          <td>Second</td>
          <td>Third</td>
          <td>Fourth</td>
        </tr>
        <tr>
          <td>content</td>
          <td>content</td>
          <td>content</td>
          <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>
</div>

您需要将 jquery 添加到您的网站并将 ID 添加到您的窗格（您可以使用其他方式访问您的窗格，但我发现 ID 很简单）

Answer 2

您可以将此添加到您的 css

table {
   border-collapse:collapse; table-layout:fixed;
}
table td {
   border:solid 1px #fab; width:25%; word-wrap:break-word;
}

并根据列数调整宽度。

编辑：fiddle.js 此处

Answer 3

也可以玩一些东西，比如

padding-right: 3000px;
margin-right: -3000px;

这将扩展元素使用的 space。有关详细信息，请参阅 https://www.sitepoint.com/css-extend-full-width-bars/...

Answer 4

按照建议，使用display:table;，它将允许容器shrink/expand根据内容和超出window的大小。

但是由于您还需要一个 overflow，您可以在两者之间添加一个额外的包装器，以允许那些 children 超出 window 的宽度并匹配最宽的第一，我给它 .buffer 作为类名来赋予它一些意义：

示例：

.list {
  overflow-x: auto;
}
.buffer {
  display: table;
}
.pane {
  border: 1px solid red;
  margin: 15px 0;
}
.pane .head {
  width: 100%;
  background: #959595;
}
.pane .body {
  width: 100%;
}
.pane .body table {
  border: 1px solid green;
}

<div class="list">
  <div class="buffer">
    <!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
    <div class="pane">
      <div class="head">
        Pane 1 header
      </div>
      <div class="body">
        Some body
      </div>
    </div>
    <div class="pane">
      <div class="head">
        Pane 2 header
      </div>
      <div class="body">
        <table width="100%">
          <tbody>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>content</td>
              <td>content</td>
              <td>content</td>
              <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/8cepsL09/6/

如何使 div 适应所有可用宽度，甚至隐藏在滚动条中？

How to make a div to fit all available width even hidden with scroll?

html

css

panel