1568

Why does my div table lose its bottom border upon sizing?

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.

Answer5:

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>

Recommend

  • Alignment and the STL in VS 2012/VC11
  • How to specify alignment with _mm_mul_ps
  • getting an Int/short/byte structure byte representation with C#
  • How to make a messagebox disappear after 3 seconds?
  • UITableView cell goes blank when scrolling
  • C Pointer confusion
  • How does sizeof work for int types?
  • Filter log files(_success and _log) in FileSystem.liststatus
  • Android Cursor RecyclerView does a flick on swipe
  • Fixed positioned elements disappear on page unload
  • Aligning a Stack pointer 8 byte from 4 byte in ARM assembly
  • @RunWith causes Maven to ignore my Test running with my own runner
  • Displaying iOS iAds only to supported countries
  • Why does Redshift need to do a full table scan to find the max value of the DIST/SORT key?
  • How to correctly get a WinForms Button control to draw custom text
  • ASP.NET MVC - Detect Time Spent on Page
  • How does ActiveSupport do month sums?
  • Python adding lots of things to PATH. How do I stop?
  • Reading space separated values file in c++ error
  • Retaining data after updating application
  • How to access meteor package name inside package?
  • How to handle elastic beanstalk deployment so it uploads only changed files
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • Possible to “watch” both HAML and SASS at the same time?
  • Filter strings with regex before casting to numeric
  • How to define custom class, title, and target in Link Browser for content elements and the new rte_c
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • $wpdb not working in file of WordPress plugin
  • How to do unit test for HttpContext.Current.Server.MapPath
  • What is the “return” in scheme?
  • RectangularRangeIndicator format like triangular using dojo
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Hits per day in Google Big Query
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Cant find why the layout is getting smaller
  • How to get NHibernate ISession to cache entity not retrieved by primary key