Question

小提琴位于：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：为了澄清，我不想删除溢出的隐藏或要增加的表的高度。保持这就是使这个问题变得困难的原因。例如，我有相同的固定高度和溢出在这里它工作完美，除了它忽略我的垂直对齐的事实。所以我现在有两个版本。一个导致边界消失，另一个失去它的垂直alginment（但允许文本对齐）：

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

Answer 1

这是因为这个代码包裹了你的表：

<div style="height:50px;  overflow:hidden;">

表越来越高了。即它的下边界向下，但包裹div（见上文）隐藏了溢出的部分。

如果你想要一个底部边框，只需将它应用于这个包装div：

https://jsfiddle.net/q3rxj91p/1/

Answer 2

这是因为您已将其中一个容器的高度设置为50px，因此当文本换行并使单元格变大时，它会在底部切割表格。

JSFiddle

<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;">

<!-- REMOVE THE HEIGHT ATTRIBUTE FROM THIS DIV -->
<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>

Answer 3

删除溢出的内联样式：隐藏或调整容器的高度。

Answer 4

您的问题是该表格显示在div中，其height显式设置为当页面缩小并且{{1}时不够大的值已设置div：

overflow:hidden

删除<div style="height:100px; overflow:hidden;">，这不会发生。有关修改后的工作版本，请参见 here 。

您还可以设置overflow:hidden以保持整体高度，并允许用户查看所有溢出的表格。请参阅 here 。

Answer 5

我找到了我想要的解决方案。

我抛弃了div表并使用了常规的html表（稍后会详细介绍） - 我认为我受到了“酷孩子们”的影响，但我喜欢结果，而且我在html表中工作，所以没有必要我可以看到强制这与div表很好地工作。

它还需要表格中的表格。

无论如何，这里有一些完美无缺的东西：

https://jsfiddle.net/99qz9okk/

<table style="width: 100%; height: 100px; table-layout:fixed;" cellspacing="0" cellpadding="0">
    <tr>
        <td style="border-style: solid; width: 10%;">
            <div style="height: 100px; overflow:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;">
            <tr>
            <td style="vertical-align: bottom; text-align: left;"> <!-- vertical-align needs to be here, it seems -->
            0001
            </td>
            </tr>
            </table>
            </div>
        </td>
        <td style="border-style: solid; width: 40%;">
            <div style="height: 100px; overflow:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;">
            <tr>
            <td style="vertical-align: bottom; text-align: right;">
            Johnny Five Johnny Five Johnny Five! Johnny Five Johnny Five Johnny Five? Johnny Five Johnny Five Johnny Five!!
            </td>
            </tr>
            </table>
            </div>
        </td>
        <td style="border-style: solid; width: 30%;">
            <div style="height: 100px; overflow:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;">
            <tr>
            <td style="vertical-align: bottom; text-align: center;">
            Robotin'
            </td>
            </tr>
            </table>
            </div>
        </td>
        <td style="border-style: solid; width: 20%;">
            <div style="height: 100px; overflow:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;">
            <tr>
            <td style="vertical-align: middle; text-align: center;">
            need@input.com
            </td>
            </tr>
            </table>
            </div>
        </td>
    </tr>
</table>

那，只是有效。我可以保持高度固定（它不会增加）。文本溢出不会扩展到它所在的单元格之外。我不会丢失底部边框。我可以垂直和水平对齐文本。完美。

不是说我是一个绝对的菜鸟，但我最近还没有涉足到html / css（更多C ++，C＃，后端等）。但正如我所提到的，“酷孩子”一直在谈论div，但我在使用div表时没有找到解决方案 - 或者它更难或者我在某种程度上缺少某些东西。我想这就是我缺乏理解的地方，但是，嘿，为什么不尝试我的“html table”解决方案而只是替换：

带div显示的表：table;
tr with div display：table-row;
td with div display：table-cell;

嗯，这不完全正常，所以，哦，好吧！现在，我不喜欢你的div table !!

哈哈：

https://jsfiddle.net/8goq3hkv/

<div style="display: table; width: 100%; height: 100px; table-layout:fixed;">
    <div style="display: table-row;">
        <div style="display: table-cell; border-style: solid; width: 10%;">
            <div style="height: 100px; overflow:hidden;">
            <div style="display: table; width: 100%; height: 100%; table-layout:fixed;">
            <div style="display: table-row;">
            <div style="display: table-cell; vertical-align: bottom; text-align: left;"> <!-- vertical-align needs to be here, it seems -->
            0001
            </div>
            </div>
            </div>
            </div>
        </div>
        <div style="display: table-cell; border-style: solid; width: 40%;">
            <div style="height: 100px; overflow:hidden;">
            <div style="display: table; width: 100%; height: 100%; table-layout:fixed;">
            <div style="display: table-row;">
            <div style="display: table-cell; vertical-align: bottom; text-align: right;">
            Johnny Five Johnny Five Johnny Five! Johnny Five Johnny Five Johnny Five? Johnny Five Johnny Five Johnny Five!!
            </div>
            </div>
            </div>
            </div>
        </div>
        <div style="display: table-cell; border-style: solid; width: 30%;">
            <div style="height: 100px; overflow:hidden;">
            <div style="display: table; width: 100%; height: 100%; table-layout:fixed;">
            <div style="display: table-row;">
            <div style="display: table-cell; vertical-align: bottom; text-align: center;">
            Robotin'
            </div>
            </div>
            </div>
            </div>
        </div>
        <div style="display: table-cell; border-style: solid; width: 20%;">
            <div style="height: 100px; overflow:hidden;">
            <div style="display: table; width: 100%; height: 100%; table-layout:fixed;">
            <div style="display: table-row;">
            <div style="display: table-cell; vertical-align: middle; text-align: center;">
            need@input.com
            </div>
            </div>
            </div>
            </div>
        </div>
    </div>
</div>

为什么我的div表在调整大小时会失去底部边框？

5 个答案: