HTML and CSS Reference
In-Depth Information
The naive approach to using
dis-
play: table
might look something
like this. You have classes for
every element of the table hierar-
chy. The following images show
this applied to two different
markup fragments. (See the full
listing in ch08/layout-table-
4.html.)
.grid {
display: table;
border-collapse: separate;
border-spacing: 1em;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
}
<div class="grid">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>
<div class="grid">
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
There's no difference in rendering between the two versions of the
code. This is because the browser inserts an
anonymous table object
in
place of the missing table row. You can see more clearly how it works if
you look at an example that doesn't work in your favor. The next list-
ing is from ch08/layout-table-2.html; markup is on the left and
CSS
is
on the right:
<body>
<header>
<h1>Heading</h1>
</header>
<div>
<article>...</article>
<aside>...</aside>
</div>
<footer>Footer</footer>
</body>
body {
display: table;
}
header, footer, div {
display: table-row;
}
article, aside {
display: table-cell;
}
