Html 如何让表格单元格均匀分布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2859180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get table cells evenly spaced?
提问by DaveDev
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
编辑：我应该补充一点，我们使用的第 3 方 PDF 转换应用程序需要 cellpadding 和 cellpacing 属性
回答by Olly Hodgson
You can use CSS. One way is to set table-layoutto 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 tdelements. This should do the trick:
您可以使用 CSS。一种方法是设置table-layout为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 cellpaddingor cellspacingattributes, or the TableRowand TableHeaderclasses. You can cover those off in CSS:
整理建议？您不需要cellpaddingorcellspacing属性或TableRowandTableHeader类。您可以在 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.
您应该使用标题（例如<h2>）而不是使用<span class="Emphasis">a<p>或表<caption>而不是 Source <span>。您也不需要这些<br>元素，因为您将使用适当的块级元素。
回答by James Van Boxtel
You could always just set the width of each td to 100%/N columns.
您始终可以将每个 td 的宽度设置为 100%/N 列。
<td width="x%"></td>
回答by hexinpeter
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:
关注的问题：
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.
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.
Outlook 2007/2010/2013 不支持填充。设置表格的宽度将允许自动设置列的宽度。这样，虽然内容不会有相等的间距。它们之间至少有一些间距。
表格列的自动宽度设置不会在内容之间提供相等的间距为内容添加的填充将强制相等的间距。
回答by JYelton
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（我第一次没有注意到）。
回答by user3798299
Make a surrounding div-tag, and set for it display: gridin its style attribute.
制作一个环绕的 div-tag，并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>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</table>
</div>
The text-align property is set only to show, that the text in the regular table cells are affected by it, even though it is set on the surrounding div. The same with the background-color but it is hard to say which element actually holds the background-color.
text-align 属性仅设置为显示常规表格单元格中的文本受其影响，即使它设置在周围的 div 上。与背景颜色相同，但很难说哪个元素实际拥有背景颜色。
回答by ground5hark
In your CSS file:
在您的 CSS 文件中：
.TableHeader { width: 100px; }
This will set all of the tdtags below each header to 100px. You can also add a width definition (in the markup) to each individual thtag, but the above solution would be easier.
这会将td每个标题下方的所有标签设置为 100px。您还可以为每个单独的th标签添加宽度定义（在标记中），但上述解决方案会更容易。
回答by BRUL
I'm also open to suggestion on how to tidy this up, if there are any? :-)
如果有的话，我也愿意接受关于如何整理它的建议？:-)
Well, you could not use the spanelement, 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出于语义原因，您不能使用该元素。而且您不必定义 class PerformanceCell。可以分别使用PerformanceTable tr {}和访问单元格和行PerformanceTable 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.
对于间距部分，我多次遇到相同的问题。我可耻地承认我回避了这个问题，所以我也很好奇任何答案。
回答by Chuck Conway
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 动态增加单元格大小。
