Pseudo-Tables with Definition Lists

When a table won't work in a Responsive Web Design layout.

HTML

<h2>Pseudo-Tables with Definition Lists</h2>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>
<dl>
<dt>heading</dt>
<dd>some content</dd>
<dd>some content</dd>
<dd>some content</dd>
</dl>

CSS

dl { float: left }

dt {
background: #000;
text-transform: uppercase;
font-weight: bold;
color: #FFF;
text-align: center;
padding: 12px
}

dd {
color: green;
border: 1px dotted silver;
margin-left: 0px;
padding: 12px;
}