Каковы хорошие практики при выборе ширины столбцов в таблице? Скажем, у меня четыре столбца, имя (переменная ширина), описание (длинное содержание текста), count (макс. 3 символа), дата (фиксированный формат).
Что было бы хорошей практикой? Я думаю, что фиксированная ширина для descr., Count и width (таким образом, фактически также делает имя "фиксированной" шириной). Но мой реальный вопрос в том, как выбрать определенный размер ширины. Например, если формат даты - yyyy-MM-dd, есть какой-то трюк, чтобы преобразовать эти 10 символов в ширину, что гарантирует, что он отображает ok в любом браузере, используя любой шрифт и размер шрифта (без лишнего пространства )?
edit: с фиксированным я имею в виду нечто похожее на "фиксированное количество пикселей относительно ширины шрифта"
Вы можете объявить white-space: nowrap; на всех ячейках, которые вы хотите растянуть, сколько нужно, не используя лишнее пространство (имя, дата, счет), а затем просто дайте оставшейся ячейке ширину 100%. Таким образом, клетка с 100% -й шириной будет расширяться как можно больше, не заставляя другие ячейки разрушаться на нескольких линиях.
Если вы хотите сэкономить много разметки...
Во-первых, если по фиксированной ширине вы имеете в виду фиксированный процент, добавьте следующее в таблицу стилей:
.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>
Обычно я предпочитаю использовать эту технику, но если это макет, который я буду использовать на нескольких таблицах (например, таблица клиентов может быть той же компоновкой, что и таблица агентов), тогда я создам класс для каждого столбца и установите ширину и т.д. в этом классе. Затем я применим соответствующий класс к каждой ячейке. Я полагаю, что оба метода могут быть объединены - соответствующий класс может быть применен к соответствующему столбцу, но тот факт, что свойства заданы в одном месте (таблица стилей), означает, что вам нужно только изменить его в одном месте.
Надеюсь, что это поможет, и что это то, что вы ищете.
Ричард