16

複数の表として表示する必要がある表形式のデータを含むページを作成しようとしています。ただし、回避するには2つの相反する要件があります。

  1. 各テーブルには、周囲に境界線が必要です。
  2. 各テーブルの列幅は、コンテンツに基づいてサイズ変更できる必要があります。ただし、列幅はすべてのテーブルで一貫している必要があります。(つまり、列のサイズは、すべてのテーブルでその列の最大のセルに基づいています)。

2 番目の要件を処理するために、複数の thead セクションと tbody セクションを含む単一の最上位テーブルを用意します。これにより、＃2が見事に達成されます。基本的に、より大きな親テーブル内に複数の疑似テーブルを作成し、tbody を伴う単一のスレッドとしてグループ化しました。

<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 と下/左/右の境界線に追加しただけでした。スタイルを tbody にします。

#1 を解決するためにこれらの作品の本物のテーブルとスタイリング ボーダーを作成しますが、それは #2 を破ります。

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

私が検討している別の代替手段は、テーブル全体の周りに境界線を作成し、分離を作成する疑似テーブル間に行を作成しようとすることですが、上/下の境界線を作成することはできますが、まだ発見していませんその行だけのテーブルの左右の境界線を消去することを意味します。それは可能ですか？

私の最後の手段は、左、右、上、および下の境界線を描画するためのクラスを作成し、これらのクラスを使用する適切なテーブル セルを設定することです。これが最終的には機能することはわかっていますが、非常に扱いにくく、マークアップが非常に煩雑になります。Colgroups は境界線のスタイルを処理できないため、ここで私を救うことはできません。残念なことに、この解決策は少し胃に負担がかかりやすくなります。

私が見逃した可能性のある境界を達成するためのより良い方法はありますか?

4

2 に答える 2

13

<table rules="groups">または同様の値を使用するrules

http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1を参照

于 2009-09-08T21:13:03.680 に答える
-3

本物のテーブルを作成する方法で行ってから、これを試してください。

別のテーブルを作成するだけです。各テーブルが次のようになっているとします。

<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 を使用して幅を設定します。

var columnOneWidth = 0; 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 Javascript ファイル (jquery.com から入手可能) を head タグに含めるだけです。

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>
于 2009-09-08T21:13:42.780 に答える