html - 在 TABLE 固定的情况下是否可以保持 TD 的流动性？

Question

编辑 08.02.2017:我不需要支持所有浏览器，因为我使用的是最新的 electron-framework。它在 Chromium 56.0.2924.87

上运行

---

我有一个可编辑的表，它在用户可以编辑之前用一些数据进行了初始化。因为我稍后想以 A4 格式打印该表格，所以它不能超过给定的宽度。

我现在的问题是，如果我使用

table-layout:fixed;
width:100%;

可编辑的 TD 将不再流畅。当然我知道这是一个悖论，固定的东西不可能是流动的...

不过我敢肯定，在 2017 年一定有办法用 fluid td 实现 fixed table。

这是一个没有固定表的例子:https://jsfiddle.net/stjkd2xs/

如您所见，只要您使用少量单词，表 就不会超出其父级。 TD 是流动的。但是，如果您开始写一个长单词，table 会突破它的父级。

这是一个固定布局的例子:https://jsfiddle.net/jdedo87z/

在这个例子中，table 将使用父级的所有宽度，这很好。但是 TD 本身将具有固定宽度，这并不好。

我想以某种方式实现TD，它在固定表中流畅。

• 是否有一种纯 CSS 方法可以做到这一点？
• 还有其他方法可以解决这个悖论吗？
• 旁注:我正在考虑完全删除 table 并改用 divs ...

期待您的建议。

问候，Megajin

Answer 1

那不是表格的工作方式...

但是你可以尝试这样的事情:

.freak-box{width:300px; height:300px; border:1px solid red;}
.phreak{position:relative; max-width:400px; margin-right:100px; border:1px solid blue;}
.squishy-inside{position:absolute; width:100%; display:inline;}

<div class="phreak">
  <div class="freak-box">
    <div class="squishy-inside">
      When Tom came home from the park, he opened the door to his home and found something was amiss. A lamp was knocked to the ground and there was strange noises coming from the kitchen. He felt his chest tighten as he thought of his wife, Sarah, was she ok or was she in there... where the noises were?
    </div>
  </div>
</div>