fiddle 位于此处:https://jsfiddle.net/9me1rrLm/
<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;">
<div style="height:50px; overflow:hidden;">
<div style="display: table; width: 100%; height: 100%;">
<div style="display: table-row;">
<div style="display: table-cell; border-style: solid; width: 10%; vertical-align: top;">
0002
</div>
<div style="display: table-cell; border-style: solid; width: 40%; vertical-align: middle;">
Johnny Five Johnny Five Johnny Five
</div>
<div style="display: table-cell; border-style: solid; width: 30%; vertical-align: bottom;">
Robotin'
</div>
<div style="display: table-cell; border-style: solid; width: 20%; vertical-align: bottom;">
need@input.com
</div>
</div>
</div>
</div>
</body>
当浏览器稍微扩展到大部分时，没问题:
看，浏览器缩小后，展开了大部分，还是没问题:
然后，在尽可能缩小浏览器之后，我丢失了文本和底部边框:
为什么？我不想丢失边框，我希望尽可能多的文本留在单元格中(溢出不可见)。
谢谢。
EDIT1: 只是为了澄清，我不想删除隐藏的溢出或增加表格的高度。保持这一点是使这个问题变得困难的原因。例如，我在这里有相同的固定高度和溢出并且它工作完美，除了它忽略了我的垂直对齐。所以我现在有两个版本。一个导致边框消失，另一个失去垂直对齐(但允许文本对齐):
https://jsfiddle.net/2L0cggds/
<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;">
<div style="display: table; width: 100%; height: 50px;">
<div style="display: table-row; width: 100%; height: 50px;">
<div style="display: table-cell; width: 10%;height: 50px; border-style: solid;">
<div style="overflow:hidden; height: 50px;vertical-align:bottom;text-align:right;">
0004
</div>
</div>
<div style="display: table-cell; width: 40%;height:50px;border-style: solid;">
<div style="overflow:hidden; height:50px;vertical-align:bottom;text-align:right;">
Johnny Five Johnny Five Johnny Five
</div>
</div>
<div style="display: table-cell; width: 30%;height: 50px; border-style: solid;">
<div style="overflow:hidden; height: 50px;vertical-align:bottom;text-align:right;">
Robotin'
</div>
</div>
<div style="display: table-cell; width: 20%;height:50px;border-style: solid;">
<div style="overflow:hidden; height:50px;vertical-align:bottom;text-align:right;">
need@input.com
</div>
</div>
</div>
</div>
</body>
EDIT2:我知道这是可能的，因为我看到这是在 Visual Web GUI 中完成的。这在 Visual WebGUI 上花了我几分钟时间(在 html/css 上花了我好几个小时，而且看不到尽头!)看看边框如何没有消失，文本如何留在单元格中:
这是我在查看源代码时看到的疯狂的 div(就像 div 中的 div 中的 div ...我只能展开并显示到我们看到我的第一个单元格的位置 ...然后我突出显示 50px):
最佳答案
这是因为这段代码包装了你的表格:
<div style="height:50px; overflow:hidden;">
table 变高了。即它的下边框向下，但包装 div(见上文)隐藏了溢出部分。
如果您仍然想要底部边框，只需将它应用到这个环绕的 div 上即可:
关于html - 为什么我的 div 表在调整大小时失去了底部边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42844881/