Stacking <dt> and <dt> in multiple columns, multiple lines <dl>
Is it possible to get this kind
from this code (using CSS?)
<dl>
<dt>Latitude</dt>
<dd>50.0</dd>
<dt>Longitude</dt>
<dd>100.0</dd>
<dt>h (metres)</dt>
<dd>0.000</dd>
<dt>VĻ (mm/y)</dt>
<dd>-6.4</dd>
<dt>VĪ» (mm/y)</dt>
<dd>-15.3</dd>
<dt>Vh (mm/y)</dt>
<dd>-2.0</dd>
</dl>
Just to be clear, I don't care about colors. It has multi-column and multi-row dt / dd pairs which are important to me. I can get the look I want with the table, but it doesn't meet my accessibility criteria. I think that's semantically closer to what I want ... it really is a list of key / value pairs.
Here are the colors I'm using:
dl {border: 1px solid #C8C8C8;}
dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}
source to share
There is nothing inaccessible about tables. It is only when they are used to display rather than express tabular data that this is a problem. You have tabular data, it just has 2 columns. Just because it's a 6-column, 2-column table doesn't mean it should look like one.
table, tbody {
display: block;
}
tr {
display: inline-block;
width: 30%;
}
td, th {
display: block;
}
<table>
<tr>
<th>Latitude</th>
<td>50.0</td>
</tr>
<tr>
<th>Longitude</th>
<td>100.0</td>
</tr>
<tr>
<th>h (metres)</th>
<td>0.000</td>
</tr>
<tr>
<th>Vf (mm/y)</th>
<td>-6.4</td>
</tr>
<tr>
<th>V? (mm/y)</th>
<td>-15.3</td>
</tr>
<tr>
<th>Vh (mm/y)</th>
<td>-2.0</td>
</tr>
</table>
source to share
Here is a basic solution, looks terrible, but with this structure you can improve it according to your requirements:
CSS
dl {
float: left;
display: block;
width: 400px;
}
dl dd {
float: left;
margin-left: -35px;
margin-top: 20px;
width. 100px;
background-color: #e0e0e0;
border: 1px solid #777777;
padding: 5px;
position: relative;
display: block;
}
dl dt {
float: left;
width. 70px;
position: relative;
display: block;
}
source to share
Yes it is possible. Andy Clark likes to use different lists and I've used dl many times.
You just treat it like ol / ul. Remove the edge / padding first.
Assign a class to dt, float them, but you have to assign a different class to the second line. Sometimes it's not as if the DL container width was set, dt will wrap, but to actually control the second dt line (V (mm / y) and -6.4 .. this line) you can assign a different class and style.
source to share
Possible? Yes, but uselessly difficult.
Far away, the easiest is to just wrap each group dt
/ dd
in an element and create it accordingly. Your example is complete here: http://cssdeck.com/labs/jsqdknho
source to share