Links open in the same window

Kicking Ass with display:table

Upon hearing about using display:table for CSS layout, I thought it sounded like a bit of an oxymoron. Once I realized all the cool things it can do I was kicking myself for not using it sooner. Lets run through some things it’s capable of.

Superior Vertical Alignment

Ever wondered what life would be like if vertical-align:middle worked how you imagined? Consider the following css.

.wrap{
  display: table;
  .block{
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

And our markup:

<div class="wrap">
  <div class="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

The above will look something like this:

With that tiny bit of code we’ve achieved vertical alignment and a semi-responsive 2 column grid.

Float-less Grids

There are tons of grid systems out there. One of my favorite to play around with has been the mdo Table Grid. This gives you all the features of a float or inline-block based grid with a fraction of the code. Here’s all we need to get a very basic 4 column grid knocked out:

* { box-sizing: border-box; }
.grid{
  display: table;
  width: 100%;
  border-spacing:.5em;
  .col{
    padding:1em;
    width:25%;
    display:table-cell;
    border:#f0f0f0 1px solid;
  }
}

The markup:

<div class="grid">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  ...
</div>

Notice the lack of extra classes appended to the grid columns. Normally, you have sub classes like .col-4 or .col-1-4 to statically set percentage based widths on each column. For full spanning table layouts, all you need are the table cells to get things laid out evenly. Coupled with box-sizing:border-box, some added padding & border-spacing, we get the following:

Responsively Easy Nav Bars

A rather famous display:table nav bar is none other than the Apple.com nav. And if we’ve learned anything in the past 5 years it’s that copying Apple is a recipe for success!

.nav{
  display:table;
  width:500px;
  li{
    display:table-cell;
    text-align:center;
  }
}
<ul class="nav">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
    ...
</ul>

Simple, eh? The result:

I go much more in-depth about table-based nav bars here.

Tables Without the <table>

Tables are always a huge pain. The ability to keep our layout out of the HTML is quite a blessing. Given the following markup, lets make a “table”.

<div class="table">
  <div class="table-row">
    <div class="table-head">Table Header</div>
    <div class="table-head">Table Header</div>
    <div class="table-head">Table Header</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Table Cell</div>
    <div class="table-cell">Table Cell</div>
    <div class="table-cell">Table Cell</div>
  </div>
</div>
.table{
  display: table;
  width:100%;
  border-collapse:collapse;
}
  .table-row{
    display: table-row;
  }
    .table-cell, .table-head{
      display: table-cell;
      padding:1em;
      border:#f0f0f0 1px solid;
    }
    .table-head{
        font-weight:bold;
    }

As you might expect, we get a nice, fairly responsive table laid out in 100% CSS.

Some Other Rad Features

You can optionally apply percentage based widths on your columns for use like a normal grid system. This gives you the ability to offset columns and the like. I recommend taking a look at mdo’s Table Grid code for the percentage settings.

Another popular effect made easy by display:table is combining vertcal-align: middle with height: 100% on the both the html, body selector and a parent element. I go more in depth about that effect here, although I’m not using table layouts.

~fin~