Методы ширины столбца таблицы HTML - PullRequest
Новая
       5

Методы ширины столбца таблицы HTML

14 голосов
/ 08 октября 2010

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

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

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

Ответы [ 2 ]

15 голосов
/ 08 октября 2010

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

2 голосов
/ 08 октября 2010

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

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

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

Thisдает вам необходимую гибкость, если вы решите применить нечетный процент ширины для любого из них, если хотите - например, width23 для одного из них, width 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>

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

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

Ричард

...