テーブルのtbody/theadセクションの周りに罫線を作成するにはどうすればよいですか？

Question

複数の表として表示する必要がある表形式のデータを持つページを作成しようとしています。しかし、私は2つの対立する要件があります。

1. 各テーブルには境界線が必要です。
2. 各テーブルの列幅は、内容に基づいてサイズを変更できる必要があります。ただし、列幅はすべての表で一貫していなければなりません。 （すなわち、列のサイズは、すべての表にわたるその列の最大のセルに基づいています）。

第2の要件を処理するために、複数のtheadセクションとtbodyセクションを含むトップレベルの単一のテーブルがあります。これは美しく＃2を達成します。基本的に、私は、大きな親テーブル内の複数の擬似テーブルを作成伴うのtbodyを持つ単一のthead要素としてグループ化している：

今

<table> 
    <thead> 
     table1 header content... 
    </thead> 
    <tbody> 
     table1 body content... 
    </tbody> 
    <thead> 
     table2 header content... 
    </thead> 
    <tbody> 
     table2 body content... 
    </tbody> 
</table> 

、私が最初の要件に対処しようとしています。各擬似テーブルは、その周囲に境界を持っていなければなりません。

IE 6/7でthead/tbodyタグの周りに境界線を追加することができないことがわかっています。または、上部/左/右の境界線スタイルをtheadとbottom /左/右ボーダースタイルをtbodyに設定します。

＃1を解決するために本物のテーブルとスタイリングボーダーを作成しますが、＃2は破損します。

もう1つの方法は、first-childとlast-childスタイルを使用して境界線を作成する方法です。残念なことに、これはあまりよくありませんし、IE 6/7ではうまくいきません。

私が探しているもう一つの方法は、テーブル全体を囲む枠を作成し、分離を作成する擬似表の間に行を作成しようとしていますが、上/下枠を作成することができますまだその行のテーブルの左/右の枠線を消去する手段を発見する必要があります。それは可能ですか？

私の最後の方法は、左、右、上、下の罫線を描画するクラスを作成し、これらのクラスを使用するように適切な表のセルを設定することです。私はこれが最終的にはうまくいくことは知っていますが、それは恐ろしいほど厄介で、本当に面倒なマークアップになります。彼らが国境のスタイルを扱うことができないので、Colgroupsはここで私を救うことができません。それはこのソリューションを胃に対してやや簡単にするので、残念です。

私が見逃しているかもしれない罫線を実現するには、より良い方法がありますか？ rules

ため

Answer 1

使用<table rules="groups">または同様の値がhttp://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Answer 2

が本物のテーブルを作成するための方法で行くのを見、そしてこれを試してみてください。

私は別のテーブルを作成するだけです。その後

<table> 
    <thead> 
     <tr> 
      <th class="column_1">Header 1</th> 
      <th class="column_2">Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
     </tr> 
     ... 
    </tbody> 
</table> 

、幅を設定するためにjQueryのを使用します：のは、各テーブルには次のようになりますとしましょう= 0

するvar columnOneWidthを。 var columnTwoWidth = 0;

$(document).ready(function() { 
    $(".column_1").each(function() { 
     if($(this).css("width") > columnOneWidth) columnOneWidth = $(this).css("width"); 
    }); 
    $(".column_2").each(function() { 
     if($(this).css("width") > columnTwoWidth) columnTwoWidth = $(this).css("width"); 
    }); 

    $(".column_1").css({width: columnOneWidth + "px"}); 
    $(".column_2").css({width: columnTwoWidth + "px"}); 
}); 

あなたがしなければならないのは、あなたの頭のタグに（jquery.comから入手可能）のjQueryのJavaScriptファイルが含まれている：

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>