如何让表格单元格均匀分布? [英] How to get table cells evenly spaced?
问题描述
我正在尝试创建一个页面,其中包含许多静态 html 表格.
I'm trying to create a page with a number of static html tables on them.
我需要怎么做才能让他们以与表格中其他列相同的大小显示每一列?
What do I need to do to get them to display each column the same size as each other column in the table?
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 />
如果有的话,我也愿意接受有关如何整理的建议?:-)
I'm also open to suggestion on how to tidy this up, if there are any? :-)
我应该补充一点,cellpadding &我们使用的第 3 方 PDF 转换应用程序需要 cellpacing 属性
edit: I should add that the cellpadding & cellspacing attributes are require by a 3rd party PDF conversion app that we use
推荐答案
您可以使用 CSS.一种方法是设置 table-layout
到 fixed
,这会阻止表格及其子项根据其内容调整大小.然后,您可以在相关的 td
元素上设置固定宽度.这应该可以解决问题:
You can use CSS. One way is to set table-layout
to fixed
, which stops the table and its children from sizing according to their content. You can then set a fixed width on the relevant td
elements. This should do the trick:
table.PerformanceTable {
table-layout: fixed;
width: 500px;
}
table.PerformanceTable td.PerformanceCell {
width: 75px;
}
关于整理的建议?您不需要 cellpadding
或 cellspacing
属性,或者 TableRow
和 TableHeader
类.你可以在 CSS 中覆盖这些:
Suggestions for for tidying up? You don't need the cellpadding
or cellspacing
attributes, or the TableRow
and TableHeader
classes. You can cover those off in 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;
}
您应该使用标题(例如 ;)而不是
和
或表格
而不是 Source .您也不需要
<br>
元素,因为您将使用正确的块级元素.
You should use a heading (e.g. <h2>
) instead of <span class="Emphasis">
and a <p>
or a table <caption>
instead of the Source <span>
. You wouldn't need the <br>
elements either, because you'd be using proper block level elements.
这篇关于如何让表格单元格均匀分布?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!