0

I want to render two dimensional array of equal sized boxes, where the box containing longest content will dictate the height of all boxes, so I decided to use HTML table to line everything up.

However, in IE i'm getting problem where div inside table cell wont fill the whole height, even it works fine in chrome. Here is snippet of the markup and styles:

.boxArrayTable td {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 30px;
    padding-right: 20px;
}

<table class="boxArrayTable">
  <tbody>
    <tr>
      <td><div class="box" /></td>
      <td><div class="box" /></td>
    </tr>
    <tr>
      <td><div class="box" /></td>
      <td><div class="box" /></td>
    </tr>
  </tbody>
</table>

div.box {
    overflow: auto;
    background-color: white;
    display: inline-block;
    min-width: 222px;
    height: 100%;
}

Why this doesn't work in IE and how to get it working? Also I should be able to float child elements of box element to bottom.

Tuomas Toivonen
  • 21,690
  • 47
  • 129
  • 225

2 Answers2

0

A step forward is to add

.outer { height: 100vh;}

to The Reveller solution.

Having said that, I cannot get edge to scroll contents where they overflow.

Grebe.123
  • 107
  • 7
-1

You really shouldn't be using tables for layout in this century. If you want to create a table style the simplest option is to set display: table on an outer div and then display: table-cell on 2 divs inside.

div {background-color: yellow;}

.outer {display: table; width: 200px}
.mid {display: table-row;}
.inner {display: table-cell; width: 50%}

<div class="outer">
  <div class="mid">
    <div class="inner">
      Blah
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet consecusomething blah blah blah you get the idea.
    </div>
  </div>
</div>

If you plan to do this for a living then I would highly recommend learning flexbox layout techbiques. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a good place to start.

R Reveley
  • 1,547
  • 3
  • 14
  • 33
  • 1
    Are you kidding? More than often customers stick with some legacy browser, and you could only dream about modern solutions – Tuomas Toivonen Aug 08 '16 at 13:06
  • This solution doesn't work. When I specify 100% height for div inside the display: table-cell container, it still doesn't fill the available space in IE, because I haven't specified fixed height to neither outer or mid containers (the content is unknown). Again, in Chrome it works fine. There has to be way to overcome this in IE (Edge) – Tuomas Toivonen Aug 09 '16 at 06:57
  • Do you want to fill the available space of the browser window? Your question asked for the tallest element to dictate the height, which the above solution does. – R Reveley Aug 10 '16 at 08:01
  • Unless you have a niche (aka corporate) target audience, most users are actually on modern browsers due to auto updating by default. http://caniuse.com/#feat=flexbox http://caniuse.com/usage-table – R Reveley Aug 10 '16 at 08:03
  • But you are using a table layout. That code is functionally and structurally the same as a table. Of course using tables for the entire site is a little old school, but in select places it can be useful for building certain layouts where table functionality can be used if flex is not an option. Using an actual table rather than CSS I think makes it a little clearer. Especially with class names that carry no semantics as to the intent. – thephpdev Sep 25 '18 at 12:35
  • The OP explicitly said that they were using tables in order to fix layout, not for the semantics. Tables are a semantic element and should only be used for that purpose. Most uses of classes aren't semantic and won't affect the reading of the data by assistive tech. – R Reveley Oct 09 '18 at 08:14