表格宽度 100% 的可滚动 div

Question

如何将表格设置为实际容器 div 宽度的 100% 宽度？

目前长表扩展了容器 div，而小表的宽度正好是 div 定义的宽度（在这种情况下为 400px），而不是像其他表那样 400px + x：

这是working fiddle。

这里是示例代码：

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
  border: 1px solid black;
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

注意

这不是set-width-of-inner-div-on-scrollable-element-to-100-of-scrollable-width 的欺骗，因为我需要使用表格，而不是 div。

Answer 1

如果你愿意，你可以试试这个简单的 jQuery。

Live Fiddle

$(function(){
  var maxWidth = 0;
  $("#scroller> table").each(function() {
    if ($(this).width() > maxWidth) {
      maxWidth = $(this).width();
    }
  });

  $("#scroller> table").width(maxWidth);
  });

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

Answer 2

您是否正在寻找类似这样的基础知识？请在评论中告诉我。

编辑：你能去掉表的结束标签，把所有的td包装到同一个表中吗？

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px
}

table {
  width: 100%;
  border: 1px solid black
}

td{
  white-space: nowrap;
  width:100%;
  border: 1px solid black
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>

    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

第二次编辑：正如 cmets 所说，似乎没有简单的方法可以在纯 css 中复制另一个元素的宽度。

有一个名为attr 的新css 功能可以解决这个问题。它可以读取元素的 html 属性值。

attr() CSS 函数用于检索属性的值 选定元素的名称并在样式表中使用它。 https://developer.mozilla.org/en-US/docs/Web/CSS/attr

在这种情况下，td 当前没有设置任何属性，并且不允许直接修改 html。

所以在这里我会做一个修复，一个 javascript 语句。

它复制第一个td 的宽度，在第二个中创建一个内联样式并设置相同的宽度（以px 为单位）。它有效，但这不是响应式的！

要使其响应，您必须设置一个全局事件处理程序onchange 或eventListener，并在任何数据重新加载或任何窗口大小更改时再次执行此语句。这可能会有点滞后，因此不推荐使用，但无论如何它被大量使用，包括在主流网站中。

scroller.children[1].children[0].children[0].children[0].setAttribute(  "style","min-width:"+scroller.children[0].children[0].children[0].children[0].clientWidth + "px")

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px
}

table {
  width: 100%;
  border: 1px solid black
}

td{
  white-space: nowrap;
  width:100%;
  border: 1px solid black
}

<div id="scroller">
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>short text</td>
    </tr>
  </table>
</div>

如果您的下一个td 比第一个长，这将无法完成这项工作，但同样可以通过检查@987654336 中的所有td width 或length 来使用javascript 解决此问题@循环，将它们设置为最大。可以提供，但基本可行？

为了在禁用 javascript 时保持流畅：

<noscript>
   <style>td{white-space:wrap}</style>
</noscript>

Answer 3

试试这个：

删除white-space: nowrap; 并将width 从表中更改为100%