防止表从长 td 增长答案

【问题标题】：preventing table from growing from long td防止表从长 td 增长
【发布时间】：2017-07-29 22:10:11
【问题描述】：

我有一个包含子表的表。我不希望子表影响表的宽度——在溢出的情况下，我希望两者独立滚动。此外，由于子表是基于切换显示的，我不希望主表行根据子表是否可见来跳转

Here's 密码笔。

我想我可以用table-layout: fixed 完成这个，但我不一定知道td 的内容，可能很长。如果我用table-layout: fixed，td还能根据内容变小吗？

This 是我想做的一个例子，嵌套表独立于其容器表滚动。

【问题讨论】：

不完全确定你想用双卷轴做什么，但你是looking for something like this吗？
不完全是。我希望表格自行调整大小，而不会干扰子表格。例如，当你显示子表时，原表的 td 会调整大小。
子表嵌套在主表中并且它是显示/隐藏...但是您不希望嵌套表影响主表的尺寸甚至调整主表的 td...ok那么主表 tds 会被嵌套表部分遮挡？
对不起，我一直在跟踪你直到最后一句话？你说的部分模糊是什么意思？在 codepen 中，当嵌套表被隐藏时，主表适合 100%。当它展开时，主表会增长到子表的大小。我想要的是无论是否显示嵌套表，主表都保持 100%，并且嵌套表在显示时水平滚动。

标签： javascript html css responsive-design html-table

【解决方案1】：

我想通了，我最终做的是将子表包装在另一个具有固定布局的表中，在一个带有溢出的 td 中。不幸的是，它似乎在 Firefox 中不起作用。

<td colspan="6">
  <table class="sub-table-container" style="table-layout: fixed; width: 100%">
    <tr><td style="overflow-x: scroll">
       <table class="sub-table">
             ...

请参阅this codepen 了解更新的解决方案

【讨论】：