Question

我正在尝试创建一个包含许多静态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＆amp;我们使用

的第三方PDF转换应用程序需要cellspacing属性

Answer 1

您可以使用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>而不是来源<span>。您也不需要<br>元素，因为您将使用正确的块级元素。

Answer 2

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

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

Answer 3

我正在设计一个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

关注的问题：

Outlook 2007/2010/2013不支持填充。具有表集的宽度将允许自动设置列的宽度。这样，虽然内容不会有相等的间距。它们之间至少有一些间距。
表格列的自动宽度设置不会在内容之间给出相等的间距为内容添加的填充将强制等间距。

Answer 4

如果您希望所有列都是固定大小，则可以使用CSS：

td.PerformanceCell
{
    width: 100px;
}

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

Answer 5

在CSS文件中：

.TableHeader { width: 100px; }

这会将每个标头下方的所有td标记设置为100px。您还可以为每个th标记添加宽度定义（在标记中），但上述解决方案会更容易。

Answer 6

如果有的话，我也愿意接受如何整理的建议？： - ）

嗯，出于语义原因，您无法使用span元素。而且您不必定义类PerformanceCell。可以分别使用PerformanceTable tr {}和PerformanceTable tr {}访问单元格和行。

对于间距部分，我多次遇到同样的问题。我可耻地承认我避免了这个问题，所以我对任何答案都很好奇。

Answer 7

取表格的宽度并除以cell（）的数量。

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

如果表格动态扩大或缩小，您可以使用一点点javascript动态增加单元格大小。

Answer 8

制作一个周围的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上进行了设置也是如此。与背景颜色相同，但是很难说出哪个元素实际具有背景颜色。

如何使表格细胞均匀分布？

8 个答案: