web-dev-qa-db-ja.com

テーブルセルを等間隔に取得する方法は？

私はそれらの上にいくつかの静的な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およびcellspacing属性を必要とすることを追加する必要がありますPDF使用する変換アプリ

htmlcsshtml-table
32
DaveDev

CSSを使用できます。 1つの方法は、 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">）を使用し、Source <p>の代わりに<caption>またはテーブル<span>を使用する必要があります。適切なブロックレベルの要素を使用しているため、<br>要素も必要ありません。

45
Olly Hodgson

各tdの幅を常に100％/ N列に設定することができます。

<td width="x%"></td>
14
James Van Boxtel

私は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. テーブル列の自動幅設定では、コンテンツ間に等間隔が与えられません。コンテンツに追加されたパディングにより、等間隔が強制されます。

2
hexinpeter

すべての列を固定サイズにする場合は、CSSを使用できます。

td.PerformanceCell
{
    width: 100px;
}

または、th.TableHeader（最初は気づかなかった）。

1
JYelton

周囲の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に設定されていても、通常のテーブルセルのテキストが影響を受けることを示すためだけに設定されます。 background-colorでも同じですが、どの要素が実際にbackground-colorを保持しているかを言うのは困難です。

0
user3798299

CSSファイルで：

.TableHeader { width: 100px; }

これにより、各ヘッダーの下のすべてのtdタグが100pxに設定されます。個々のthタグに（マークアップで）幅の定義を追加することもできますが、上記のソリューションの方が簡単です。

0
ground5hark

また、もしあれば、これを片付ける方法についての提案を受け入れますか？ :-)

さて、セマンティック上の理由から、span要素は使用できません。そして、クラスPerformanceCellを定義する必要はありません。セルと行には、それぞれPerformanceTable tr {}とPerformanceTable tr {}を使用してアクセスできます。

間隔部分については、同じ問題が何度かあります。私はこの問題を回避したことを恥ずかしく思います。したがって、私もどんな答えにも非常に興味があります。

0
BRUL

テーブルの幅を取得し、セルの数で割ります（）。

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

テーブルが動的に拡大または縮小する場合は、少しのJavaScriptでセルサイズを動的に増やすことができます。

0
Chuck Conway