Выровнять ячейку таблицы с помощью css

Я бы добавил класс к вашим "ярлыкам"

<table class="table">
    <tr class="table-row">
        <td class="table-col label">Name:</td>
        <td class="table-col">Bob</td>
        <td class="table-col label">Age:</td>
        <td class="table-col">20</td>
    </tr>
</table>

CSS

.table {
    width:100%
}

.label {width:50px; font-weight:bold;}

http://jsfiddle.net/QfN3f/5/

Вы также можете использовать n-й ребенок.

tr td:nth-child(odd) {width:50px; font-weight:bold;}

http://jsfiddle.net/QfN3f/6/

Я также рассмотрел бы целесообразность таблицы здесь, так как это может быть не табличные данные. Возможно, рассмотрим список определений.

Если вы должны использовать table для этого, я бы предложил (предполагая, что ваши элементы td метки всегда являются элементами с нечетным номером):

td:nth-child(odd) {
    text-align: right;
}

td:nth-child(even) {
    text-align: left;
}

Демо-версия JS Fiddle.

Но я бы настоятельно предложил перейти к более семантическому HTML, например списку определений:

<dl>
    <dt>Name</dt>
    <dd>Bob</dd>
    <dt>Age</dt>
    <dd>20</dd>
</dl>

С помощью CSS:

dt, dd {
    display: inline-block; /* allows the elements to be side-by-side */
    width: 5em;
    margin: 0; /* removes the default margins */
    padding: 0.2em 0; /* aesthetics, but sets/overrides the defaults */
}

dt {
    text-align: right; /* to move the 'label' towards the 'value' */
}

dd {
    text-align: left;
    text-indent: 0.5em; /* aesthetic, gives a small separation; adjust to taste */
}

Демо-версия JS Fiddle.

Используйте этот html-код:

<table class="table">
<tr class="table-row">
    <td class="table-col-a">Name:</td>
    <td class="table-col-b">Bob</td>
    <td class="table-col-a">Age:</td>
    <td class="table-col-b">20</td>
</tr>
</table>  

И этот код css:

.table-col-a{float:right;} 

Также вы можете использовать paddings, чтобы сделать это именно так, как вы хотите.

Добавьте в столбец% или фиксированную ширину:

<td class="table-col" width="20px">Name:</td>

или

HTML

<td class="table-col name-col">Name:</td>

CSS

.name-col{
   width:20px;
}

Если ширина столбца не указана, ширина столбца одинакова для каждого из них.

Если вы хотите уменьшить пространство пробелов, вы также можете уменьшить ширину таблицы, удалив width:100% и записывая фиксированную ширину или меньшую или записывая фиксированную ширину во все столбцы.

Jsfiddle

Вы можете удалить ширину: 100% и указать заполнение для ячеек таблицы (td).

.table td {
    padding: 10px
}

jsfiddle

Кроме того, если вы хотите настроить отдельные ячейки, вы можете добавить другой класс к некоторому <td class="myCustomClass"> и назначить различную ширину/дополнение или любое другое свойство, которое вы хотите в css.

См. Рабочую демонстрацию jsFiddle

Просто измените свой HTML-код на:

<table class="table">
    <tr class="table-row">
        <td class="table-cola">Name:</td>
        <td class="table-colb">Bob</td>
        <td class="table-cola">Age:</td>
        <td class="table-colb">20</td>
    </tr>
</table>

и ваш CSS:

.table 
{
    width:100%
}
.table td
{
    width: 25%;
}
.table-cola
{
    text-align: right;
}
.table-colb
{
    text-align: left;
}

что даст:

Разрывы настолько широки, что ячейки таблицы будут расширяться, занимая столько места, сколько доступно. Чтобы уменьшить пробелы, прекратите растягивать таблицу полностью через родительский div. Просто удалите width:100% от стола.

Конечно, вы можете одновременно добавить min-width в ячейки, чтобы столбцы не слились слишком близко друг к другу.