代码之家 › 专栏 › 技术社区 › DaveDev

如何使表格单元格均匀分布?

html-table css html

DaveDev · 技术社区 · 14 年前

我正在尝试创建一个页面,页面上有许多静态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属性

7 回复 | 直到 8 年前

Jo Liss 12 年前

你可以使用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"> 和A <p> 或桌子 <caption> 而不是来源 <span> . 你不需要 <br> 元素,因为您将使用适当的块级元素。

Matt 10 年前

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

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

hexinpeter 9 年前

我正在设计一个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不支持填充。设置表的宽度将允许自动设置列的宽度。这样,尽管内容的间距不相等。它们之间至少有一些间隔。
表列的自动宽度设置不会使内容之间的间距相等为内容添加的填充将强制相等的间距。

ground5hark 14 年前

在CSS文件中:

.TableHeader { width: 100px; }

这将设置所有 td 每个标题下面的标签到100px。还可以(在标记中)为每个单独的 th 标记,但上面的解决方案会更简单。

JYelton Melchior Blausand 14 年前

如果希望所有列的大小都固定,可以使用CSS:

td.PerformanceCell
{
    width: 100px;
}

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

BRUL 14 年前

如果有的话,我也愿意就如何整理这个问题提出建议。-)

嗯,你不能用 span 元素,出于语义原因。你不需要定义类 PerformanceCell . 可以使用 PerformanceTable tr {} 和 性能表TR ,分别。

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

Chuck Conway 14 年前

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

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

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