Question

我有一个包含两个面板的页面。第二个面板包含一些大表，因此即使包装内容也无法在全宽窗口上显示。我已经添加了一个水平滚动来解决这个问题，但似乎div并不想要适应大表格。

经过一些研究后，我发现如何通过此css更改强制第二个面板符合表格大小：

.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

根据建议，使用display:table;，它将允许容器根据内容缩小/扩展，超出窗口大小。

但是既然你还需要一个overflow，你可以在它们之间添加一个额外的包装器以允许这些孩子超出窗口的宽度并匹配最宽的一个，我给它.buffer作为一个classname赋予它一些含义：

示例：

.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/

Answer 3

你可以将它添加到你的css

driver.key

并根据列数调整宽度。

编辑：fiddle.js此处

Answer 4

还可以使用例如

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

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

如何使div适合所有可用宽度甚至隐藏滚动？

4 个答案: