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

Question

Я пытаюсь создать страницу с несколькими статическими HTML-таблицами.

Что мне нужно сделать, чтобы они отображали каждый столбец одинакового размера с каждым другим столбцом в таблице?

HTML выглядит следующим образом:

<span class="Emphasis">Interest rates</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr>
    <tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr>
</table>
<span>Source: Bt</span><br /><br />

<span class="Emphasis">Stock markets</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr>
    <tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr>
    <tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr>
    <tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr>
    <tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr>
</table>
<span>Source: B</span><br /><br />

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

edit: Я должен добавить, что атрибуты cellpadding и cellspacing требуются приложением стороннего преобразования PDF, которое мы используем

Answer 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;
}

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

Answer 2

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

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

Answer 3

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

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

После долгих проб и ошибок я придумал следующее

<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

Проблемы, вызывающие озабоченность:

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

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

Answer 4

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

td.PerformanceCell
{
    width: 100px;
}

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

Answer 5

Создайте окружающий тег div и установите для него display: grid в его атрибуте style.

<div style='display: grid; 
            text-align: center;
            background-color: antiquewhite'
>
  <table>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </table>
</div>

Свойство text-align установлено только для того, чтобы показать, что оно влияет на текст в обычных ячейках таблицы, даже если оно установлено в окружающем элементе div. То же самое с цветом фона, но трудно сказать, какой элемент на самом деле содержит цвет фона.

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

.TableHeader { width: 100px; }

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