css - 左侧和右侧表格数据的不同 CSS 样式

Question

这是我的 table :

<table width="100%">
<tr ><td width="35%" height="30" class="left-info" >Criminal Id :</td>
<td width="65%"  class="right-info" >CR7887898652</td></tr>
<tr><td height="30"  class="right-info" >Full Name :</td><td  class="left-info" ></td></tr>
<tr><td height="30"  class="right-info" >Date of Birth :</td><td  class="left-info" ></td></tr>
</table>

如何为每个表数据删除这些重复使用的类。因为，我对左侧表格数据使用了 class="left-info"，对右侧表格数据使用了 class="right-info"。但是，这构成了编码的网格，任何人都可以建议我如何用最少的代码实现相同的风格吗？

Answer 1

您可以切换到非表格布局(也许 DL 可能更适合您的需求)，或者如果您必须使用表格，请考虑使用 col元素，您可以对其应用 class 属性。

例子

使用上面的示例，这就是我建议使用 col 元素的方式。

<table id="example">
    <col class="label" />
    <col class="value" />

    <tr>
        <td>Criminal Id :</td>
        <td>CR7887898652</td>
    </tr>
    <tr>
        <td>Full Name:</td>
        <td>Foo Bar</td>
    </tr>
    <tr>
        <td>Date of Birth:</td>
        <td>01/14/1983</td>
    </tr>
</table>

但是，考虑到您的示例，我认为如果您使用 TH 元素和纯 CSS，您可以通过更好的语义和更少的代码来实现您的目标:

#example th {
    text-align: right;
    font-weight: normal;
}

#example td {
    text-align: left;
}

...

<table id="example">
    <tr>
        <th>Criminal Id :</th>
        <td>CR7887898652</td>
    </tr>
    <tr>
        <th>Full Name:</th>
        <td>Foo Bar</td>
    </tr>
    <tr>
        <th>Date of Birth:</th>
        <td>01/14/1983</td>
    </tr>
</table>

在这个层面上，使用 DL 还是 TABLE 并不重要，因为当这样使用时，它们都是语义丰富的元素。恕我直言，我仍然更喜欢 DL，但说实话，它们可能更难设计样式。