css - 在多列、多行 中堆叠 和

Question

有没有可能得到这个样子

来自这段代码(使用 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;}

Answer 1

表格本身没有什么是不可访问的。只有当它们用于显示而不是用于表达表格数据时，它才是一个问题。您确实有表格数据，它恰好有 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>