Question

这是我的表：

<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，但实际上他们的风格可能更难。

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

1 个答案:

实施例