Как получить табличные ячейки равномерно распределенные?

Ответ 1

Вы можете использовать CSS. Один из способов - установить table-layout на fixed, который останавливает таблицу, а дети - от размера в соответствии с их содержанием. Затем вы можете установить фиксированную ширину в соответствующих элементах td. Это должно сделать трюк:

table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}
    table.PerformanceTable td.PerformanceCell {
        width: 75px;
    }

Предложения для уборки? Вам не нужны атрибуты cellpadding или cellspacing или классы TableRow и TableHeader. Вы можете закрыть их в CSS:

table {
    /* cellspacing */
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    /* This covers the th elements */
}
tr {
    /* This covers the tr elements */
}
th, td {
    /* cellpadding */
    padding: 0;
}

Вместо источника <span> следует использовать заголовок (например, <h2>) вместо <span class="Emphasis"> и <p> или таблицу <caption>. Вам также не нужны элементы <br>, потому что вы будете использовать соответствующие элементы уровня блока.

Ответ 2

Вы всегда можете просто установить ширину каждого td в столбцы 100%/N.

<td width="x%"></td>

Ответ 3

В вашем файле CSS:

.TableHeader { width: 100px; }

Это приведет к установке всех тегов td под каждым заголовком до 100 пикселей. Вы также можете добавить определение ширины (в разметке) для каждого отдельного тега th, но это решение было бы проще.

Ответ 4

Если вы хотите, чтобы все ваши столбцы имели фиксированный размер, вы можете использовать CSS:

td.PerformanceCell
{
    width: 100px;
}

Или лучше, используйте th.TableHeader (я не заметил, что в первый раз).

Ответ 5

Я также открыт для предложения о том, как его убрать, если таковые имеются?: -)

Ну, вы не можете использовать элемент span по семантическим причинам. И вам не нужно определять класс PerformanceCell. Доступ к ячейкам и строкам осуществляется с помощью PerformanceTable tr {} и PerformanceTable tr {} соответственно.

Для части интервала у меня есть одна и та же проблема несколько раз. Я постыдно признаю, что избегал этой проблемы, поэтому мне очень любопытно отвечать на любые вопросы.

Ответ 6

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

| --- something --- | --- очень длинная вещь --- | --- короткая --- |

После большого количества проб и ошибок я придумал следующие

<style>
    .content {padding: 0 20px;}
</style>

table width="400"
    tr
        td
            a.content something
        td 
            a.content a very long thing
        td 
            a.content short

Вопросы, вызывающие озабоченность:

• Outlook 2007/2010/2013 не поддерживает дополнение. Наличие ширины набора таблиц позволит автоматически устанавливать ширину столбцов. Таким образом, хотя содержимое не будет иметь равных интервалов. У них по крайней мере есть промежуток между ними.

• Автоматическая настройка ширины для столбцов таблицы не даст равного расстояния между содержимым Добавка, добавленная для содержимого, заставит равный интервал.

Ответ 7

Возьмите ширину таблицы и разделите ее на число клеток().

PerformanceTable {width:500px;}    
PerformanceTable.td {width:100px;}

Если таблица динамически расширяется или сжимается, вы можете динамически увеличить размер ячейки с помощью небольшого javascript.