1568
Question:
Fiddle located here: <a href="https://jsfiddle.net/9me1rrLm/" rel="nofollow">https://jsfiddle.net/9me1rrLm/</a>
<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>
When the browser is somewhat to mostly expanded, no problems:
<a href="https://i.stack.imgur.com/YmHWQ.jpg" rel="nofollow"><img alt="Image 1" class="b-lazy" data-src="https://i.stack.imgur.com/YmHWQ.jpg" data-original="https://i.stack.imgur.com/YmHWQ.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
See, after shrinking the browser, so mostly expanded, still no problems:
<a href="https://i.stack.imgur.com/9tCTU.jpg" rel="nofollow"><img alt="Image 2" class="b-lazy" data-src="https://i.stack.imgur.com/9tCTU.jpg" data-original="https://i.stack.imgur.com/9tCTU.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
Then, after shrinking the browser as far as I could, I lose text and the bottom border:
<a href="https://i.stack.imgur.com/63G4y.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/63G4y.jpg" data-original="https://i.stack.imgur.com/63G4y.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
Why? I don't want to lose the border, and I want as much text as possible to stay within the cell (with the overflow invisible).
Thank you.
<strong>EDIT1:</strong> Just for clarification, I don't want to remove overflow hidden or the height of the table to increase. Keeping that is what what makes this question difficult. For example, I have the same fixed height and overflow here and it works perfect , except for the fact it ignores my vertical alignment. So I now have two versions. One causes the border to disappear, the other loses it's vertical alginment (but allows text alignment):
<a href="https://jsfiddle.net/2L0cggds/" rel="nofollow">https://jsfiddle.net/2L0cggds/</a>
<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>
<strong>EDIT2:</strong> I know this is possible because I see this done in Visual Web GUI. This took me minutes in Visual WebGUI (and hours with html/css with no end in sight!) Take a look and see how the border didn't disappear and the text stayed within the cells:
<a href="https://i.stack.imgur.com/ed6Bm.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/ed6Bm.jpg" data-original="https://i.stack.imgur.com/ed6Bm.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
And here is the div madness I look at when I view source (it's like div within a div within a div ... and I could only expand and show to the point where we see my first cell ... and I highlighted the 50px):
<a href="https://i.stack.imgur.com/us1ay.jpg" rel="nofollow"><img alt="vwg image 1" class="b-lazy" data-src="https://i.stack.imgur.com/us1ay.jpg" data-original="https://i.stack.imgur.com/us1ay.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
Answer1:It's because of this code which wraps your table:
<div style="height:50px; overflow:hidden;">
The table gets higher. i.e. its lower border goes down, but the wrapping div (see above) hides the overflowing part.
If you nevertheless want a bottom border, just apply it to this wrapping div:
<a href="https://jsfiddle.net/q3rxj91p/1/" rel="nofollow">https://jsfiddle.net/q3rxj91p/1/</a>
Answer2:This is because you have set a height on one of the containers to 50px so it's cutting the table off at the bottom when the text wraps and makes the cells bigger.
<a href="https://jsfiddle.net/984u9ok7/" rel="nofollow">JSFiddle</a>
<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>
Answer3:Remove the inline style of overflow:hidden or adjust the height of the container.
Answer4:Your problem is that the table is being displayed in a div that has its height explicitly set to a value that isn't big enough when the page is shrunken down and that div has overflow:hidden set on it:
<div style="height:100px; overflow:hidden;">
Remove the overflow:hidden and that won't happen. See <strong><a href="https://jsfiddle.net/owon0d3t/1/" rel="nofollow">here</a></strong> for modified working version.
You could also set overflow:scroll to keep the overall height and allow users to see all of the overflowed table. See <strong><a href="https://jsfiddle.net/acce88yh/1/" rel="nofollow">here</a></strong> for that.
I have a solution to exactly what I want.
I ditched the div tables and used regular html tables (more on that later) - I think I was influenced by what the "cool kids" are doing, but I like results, and I have it working in html tables, so there's no need that I can see to force this to work nicely with div tables.
It also required tables within tables.
Anyhow, here's something that works perfectly:
<a href="https://jsfiddle.net/99qz9okk/" rel="nofollow">https://jsfiddle.net/99qz9okk/</a>
<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>
That, just works. I can keep the height fixed (it won't increase). Text overflow does not expand beyond the cell it is in. I don't lose the bottom border. I can align the text vertically and horizontally. Perfect.
Not that I'm an absolute noob, but I haven't dabbled in html/css recently (more C++, C#, back-end, etc). But as I mentioned, the "cool kids" have been talking about div's, but I haven't found a solution when using div tables - or it's much harder or I'm missing something in some way. And this is where my lack of understanding comes in, I suppose, but hey, why not try my "html table" solution and just replace:
<ul><li>table with div display: table;</li> <li>tr with div display: table-row;</li> <li>td with div display: table-cell;</li> </ul>Well, that doesn't exactly work, so, oh well! For now, I don't like you div tables!!
For ha ha's:
<a href="https://jsfiddle.net/8goq3hkv/" rel="nofollow">https://jsfiddle.net/8goq3hkv/</a>
<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>
![Exception Using PayPal-PHP-SDK [Http response code 400]](/skin/wt/img/t.gif)