如何使表单元格间隔均匀?

I'm trying to create a page with a number of static html tables on them.

我正在尝试创建一个页面，其中包含许多静态html表。

What do I need to do to get them to display each column the same size as each other column in the table?

我需要做什么才能让它们显示与表中其他列相同大小的每个列?

The HTML is as follows:

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? :-)

如果有的话，我也可以给你一些建议。:-)

edit: I should add that the cellpadding & cellspacing attributes are require by a 3rd party PDF conversion app that we use

编辑:我应该补充一点，我们使用的第三方PDF转换应用程序需要cellpadding属性和cellpadding属性

7 个解决方案

#1

You can use CSS. One way is to set table-layout to fixed, which stops the table and it's children from sizing according to their content. You can then set a fixed width on the relevant td elements. This should do the trick:

您可以使用CSS。一种方法是将表布局设置为fixed，这将停止表，并且子表将根据其内容进行大小调整。然后可以在相关的td元素上设置一个固定的宽度。这应该能达到目的:

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

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:

关于整理的建议?不需要cellpadding属性或cellspaces属性，也不需要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;
}

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.

你应该使用一个标题(例如

)而不是和

或表 <标题> 而不是源 。您也不需要
元素，因为您将使用适当的块级元素。

#2

You could always just set the width of each td to 100%/N columns.

您可以将每个td的宽度设置为100%/N列。

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

#3

In your CSS file:

在你的CSS文件:

.TableHeader { width: 100px; }

This will set all of the td tags below each header to 100px. You can also add a width definition (in the markup) to each individual th tag, but the above solution would be easier.

这将把所有的td标签设置在每个头以下到100px。您还可以在每个标记中添加宽度定义(在标记中)，但是上面的解决方案会更简单。

#4

If you want all your columns a fixed size, you could use CSS:

如果你想让你所有的列都有固定的大小，你可以使用CSS:

td.PerformanceCell
{
    width: 100px;
}

Or better, use th.TableHeader (I didn't notice that the first time around).

或者更好,使用th。TableHeader(我第一次没有注意到)。

#5

I'm also open to suggestion on how to tidy this up, if there are any? :-)

如果有的话，我也可以给你一些建议。:-)

Well, you could not use the span element, for semantic reasons. And you don't have to define the class PerformanceCell. The cells and rows can be accessed by using PerformanceTable tr {} and PerformanceTable tr {}, respectively.

由于语义上的原因，你不能使用span元素。你不需要定义类的性能。通过使用性能表tr{}和performance cetable tr{}，可以访问这些单元格和行。

For the spacing part, I have got the same problem several times. I shamefully admit I avoided the problem, so I am very curious to any answers too.

对于间隔部分，我已经遇到同样的问题好几次了。我羞愧地承认我回避了这个问题，所以我也很想知道任何答案。

#6

I was designing a html email and had a similar problem. But having every cell with the fixed width is not what I want. I'd like to have the equal spacing between the contents of the columns, like the following

我当时正在设计一个html电子邮件，遇到了类似的问题。但是拥有固定宽度的每个单元格不是我想要的。我希望列的内容之间有相等的间距，如下所示

|---something---|---a very long thing---|---short---|

|————————|————很长时间的事情- - - - - - | -简写- - - |

After a lot of trial and error, I came up with the following

经过多次反复试验，我得出以下结论。

<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

Issues of concern:

关心的问题:

1. Outlook 2007/2010/2013 don't support padding. Having the width of the table set will allow the widths of the columns to automatically set. This way, though the contents will not have equal spacing. They at least have some spacing between them.

   Outlook 2007/2010/2013不支持填充。设置表的宽度将允许自动设置列的宽度。这样，虽然内容没有相等的间距。它们之间至少有一些间隔。

2. Automatic width setting for table columns will not give equal spacing between the contents The padding added for the contents will force the equal spacing.

   表列的自动宽度设置将不会在内容之间提供相等的间距，为内容添加的填充将强制相等的间距。

#7

Take the width of the table and divide it by the number of cell ().

取表的宽度，并将其除以单元格的数目()。

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

If the table dynamically widens or shrinks you could dynamically increase the cell size with a little javascript.

如果表动态地变大或缩小，您可以使用少许javascript动态地增加单元格大小。