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

这是我的桌子：

<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>

罪犯身份证：
CR7887898652
全名：
出生日期：

---

如何删除对每个表数据重复使用类的情况。如前所述，我对左侧表格数据使用了

class=“left info”

，对右侧表格数据使用了

class=“right info”

。但是，这是编码的网格，有人能告诉我如何用最少的代码来做同样的样式吗？< /p> 您可以切换到非表布局（也许<代码> dl <代码>可以更好地满足您的需求），或者如果您必须使用表，考虑使用<代码> Cale>代码>元素，您可以应用<代码>类< /C>属性>

例子 使用上面的示例，我建议使用

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>

罪犯身份证：
CR7887898652
全名：
富吧
出生日期:
01/14/1983

---

在这个级别上，如果您使用

DL

或

TABLE

，应该没有什么关系，因为它们在这样使用时都是语义丰富的元素。嗯，我还是喜欢DL，但说实话，它们可能更难设计。

你能给我举个例子或任何我可以获得参考的链接吗。是的，

DL

会是一个更好的选择。对我来说，看起来像是非表格数据。@sql\u请尝试用谷歌搜索“html dl”。

col

元素对我很有帮助：）

#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>