logo标签列表

如何使表格单元格间距均匀？

htmlcsshtml-table
52

我试图创建一个页面，其中包含若干个静态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 />

如果有任何建议，我也很愿意整理一下这个代码。 :-)

编辑： 我应该补充说明，我们使用的第三方PDF转换应用程序需要cellpadding和cellspacing属性。

8个回答
65

你可以使用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> 代替 Source <span>。你也不需要使用 <br> 元素，因为你将使用适当的块级元素。

2
请注意，设置 white-space: nowrap 将会取消 table-layout: fixed 的效果；单元格将再次扩展以适应内容。此外，如果您插入的图像宽度大于单元格宽度，则单元格将再次扩展。另外，您将无法为单元格设置高度（但实际上您从来没有能够设置过）。 - Robusto
1
非常好的观点。text-overflow可以帮助消除nowrap问题，参见http://www.quirksmode.org/css/textoverflow.html。 - Olly Hodgson
5
值得注意的是，如果您在任何 <td> 元素上未设置 width 属性，则它们的宽度将平均分配。例如，3列的表格每列宽度为 33.3%，5列的表格每列宽度为 20% 等等。 - Zach Lysobey
这会压缩我的表格。表格中唯一的其他属性是td colspan=2。请更新以涵盖更一般的情况。 - Philip Rego
1
你可能想要了解一下CSS断字：https://justmarkup.com/log/2019/01/a-look-at-css-hyphenation-in-2019/ - Olly Hodgson
显示剩余2条评论
22

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

<td width="x%"></td>
我建议使用CSS而不是width属性。只需在.PerformanceCell中添加width: ###即可。如果宽度取决于实际数据或其他因素，您可以在特定的HTML页面中为.PerformanceCell生成一个适合该页面的定义。 - Eric J.
如果您正在使用JQuery生成代码，则可以使用以下代码：$('.myTableClass td').css('width','100/NumberOfColumns%')。 - acrawly
HTML中的width属性现已被弃用。 - YektaDev
1
我正在设计一个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. 表格列的自动宽度设置不会给内容之间提供相等的间距 为内容添加填充将强制提供相等的间距。

顺便提一下，我上面写的HTML代码是使用“slim-lang”语法编写的。 - hexinpeter
1
在你的CSS文件中：
.TableHeader { width: 100px; }

这将会将每个标题下的所有td标签设置为100像素。你也可以在各自的th标签（在标记中）中添加宽度定义，但是上面的解决方案会更容易。

1
如果您想让所有列都具有固定的大小，您可以使用CSS：
td.PerformanceCell
{
    width: 100px;
}

或者更好的是，使用th.TableHeader（我第一次没有注意到）。

1
创建一个包围的div标签，并在其样式属性中设置display: grid。
<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中设置，常规表格单元格中的文本也会受到其影响。背景颜色也是如此，但很难确定哪个元素实际上持有背景颜色。

0

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

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

如果表格动态地变宽或变窄，您可以使用一些 JavaScript 动态增加单元格大小。
0
我也很乐意听取任何整理这个代码的建议。:-)
嗯，出于语义化的原因，您可以不使用 span 元素。 您也不需要定义类 PerformanceCell。可以通过使用 PerformanceTable tr {} 和 PerformanceTable tr {} 来访问单元格和行，分别。
至于间距问题，我也遇到过同样的问题。我很惭愧地承认我回避了这个问题，所以我非常好奇是否有任何答案。
对于现在给出的答案，我自己尝试找到一种流畅的方法来完成它。 - BRUL
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接