Question

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

目前long表扩展容器div，小表只有div的定义宽度（本例中为400px）而不是400px + x，就像另一个表一样：

这里是示例代码：

＆＃13;

#scroller {
  width: 400px;
  overflow: auto;
  height: 200px;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

注意

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

Answer 1

你在寻找像这样的基础知识吗？请在评论中告诉我。

编辑：你可以删除关闭表标签，将所有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>

第二次编辑：正如评论中所说，看起来没有简单的方法来复制纯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中的任何一个比第一个td长，则无法完成此工作，但是再次通过检查所有width length或{j}可以解决此问题在foreach循环中{1}}将它们设置为最大值。可以提供，但很大程度上可行吗？

在禁用javascript时保持顺畅：

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

Answer 2

你可以尝试这个简单的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 3

试试这个：

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

表格宽度为可滚动div的100％

3 个答案: