Различные стили CSS для данных левой и правой сторон таблицы

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атрибут to.

Пример

Используя ваш пример выше, я бы предложил использовать элемент 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, но, честно говоря, их может быть сложнее.