Как расположить ячейки таблицы с интервалами равномерно?
Я пытаюсь создать страницу со многими статическими таблицами 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 />
Я также открыт для предложения о том, как убрать это, если существует кто-либо?:-)
править: Я должен добавить, что cellpadding и атрибуты cellspacing, требуют третьей стороной приложения преобразования PDF, которое мы используем
6 ответов
Вы можете использовать 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;
}
Вы должны использовать заголовок (например, ) вместо
и < p> или таблица вместо Source . Вам также не понадобятся элементы , потому что вы будете использовать правильные элементы уровня блока.
Вы всегда можете просто установить ширину каждого td равной 100% / N столбцов.
<td width="x%"></td>
В вашем файле CSS:
.TableHeader { width: 100px; }
Это установит для всех тегов td под каждым заголовком значение 100 пикселей. Вы также можете добавить определение ширины (в разметке) к каждому отдельному тегу th , но описанное выше решение было бы проще.
Я также открыт для предложений о том, как это исправить, если они есть? : -)
Ну, вы не могли использовать элемент span по семантическим причинам.
И вам не нужно определять класс PerformanceCell . Доступ к ячейкам и строкам можно получить с помощью PerformanceTable tr {} и PerformanceTable tr {} соответственно.
Что касается интервала, у меня несколько раз возникала одна и та же проблема. Я со стыдом признаю, что избежал проблемы, поэтому мне тоже очень любопытны ответы.
Возьмите ширину таблицы и разделите ее на количество ячеек ().
PerformanceTable {width:500px;}
PerformanceTable.td {width:100px;}
Если таблица динамически расширяется или сжимается, вы можете динамически увеличивать размер ячеек с помощью небольшого javascript.
Если вы хотите, чтобы все ваши колонки имели фиксированный размер, вы можете использовать CSS:
td.PerformanceCell
{
width: 100px;
}
Или лучше использовать th.TableHeader (я не заметил этого в первый раз).