Практика ширины столбцов таблицы HTML

Каковы хорошие практики при выборе ширины столбцов в таблице? Скажем, у меня четыре столбца, имя (переменная ширина), описание (длинное содержание текста), count (макс. 3 символа), дата (фиксированный формат).

Что было бы хорошей практикой? Я думаю, что фиксированная ширина для descr., Count и width (таким образом, фактически также делает имя "фиксированной" шириной). Но мой реальный вопрос в том, как выбрать определенный размер ширины. Например, если формат даты - yyyy-MM-dd, есть какой-то трюк, чтобы преобразовать эти 10 символов в ширину, что гарантирует, что он отображает ok в любом браузере, используя любой шрифт и размер шрифта (без лишнего пространства )?

edit: с фиксированным я имею в виду нечто похожее на "фиксированное количество пикселей относительно ширины шрифта"

Ответ 1

Вы можете объявить white-space: nowrap; на всех ячейках, которые вы хотите растянуть, сколько нужно, не используя лишнее пространство (имя, дата, счет), а затем просто дайте оставшейся ячейке ширину 100%. Таким образом, клетка с 100% -й шириной будет расширяться как можно больше, не заставляя другие ячейки разрушаться на нескольких линиях.

Ответ 2

Если вы хотите сэкономить много разметки...

Во-первых, если по фиксированной ширине вы имеете в виду фиксированный процент, добавьте следующее в таблицу стилей:

.width1 {
    width: 1%;
}
.width2 {
    width: 2%;
}
.width99 {
    width: 99%;
}
.width100 {
    width: 100%;
}

Это дает вам необходимую гибкость, если вы решите применить нечетную процентную ширину для любого из них, если хотите - например, ширина23 на одном из них, ширина 27 на другой.

Теперь это умный бит. Используя тег col, вы можете применять ширину только один раз, а не в каждой ячейке. Я знаю, что вы можете применять ширину только к первой строке, и они будут устанавливать ширину для одной и той же ячейки в каждой другой строке, но тег col можно использовать и для установки других свойств. Например:

<table class="width100">
    <col class="width15" style="background-color: #cccccc;" />
    <col class="width65" />
    <col class="width10" />
    <col class="width10" />
    <tr>
        <td>My Sample Name</td>
        <td>My Sample Long Description</td>
        <td>5</td>
        <td>2010-Oct-08</td>
    </tr>
</table>

Обычно я предпочитаю использовать эту технику, но если это макет, который я буду использовать на нескольких таблицах (например, таблица клиентов может быть той же компоновкой, что и таблица агентов), тогда я создам класс для каждого столбца и установите ширину и т.д. в этом классе. Затем я применим соответствующий класс к каждой ячейке. Я полагаю, что оба метода могут быть объединены - соответствующий класс может быть применен к соответствующему столбцу, но тот факт, что свойства заданы в одном месте (таблица стилей), означает, что вам нужно только изменить его в одном месте.

Надеюсь, что это поможет, и что это то, что вы ищете.

Ричард