css – 堆叠并在多列中,多行

有可能得到这个外观

从这段代码(使用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>

为了清楚起见,我不关心颜色.这是dt / dd对堆叠多列和多行对我来说很重要.我可以通过表获得我想要的外观,但它无法达到我的可访问性标准.我认为a在语义上更接近我想要的……它实际上是键/值对的列表.

这是我正在使用的颜色：

dl {border: 1px solid #C8C8C8;}

dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}

表格本身没有任何内容.只有当它们用于显示而不是表达表格数据时才会出现问题.你有表格数据,它恰好有2列.仅仅因为它是一个2列的6行表并不意味着它必须看起来像一个.

http://jsfiddle.net/hgWxT/

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>