0

2 つのテーブルが上下に重なっています。一番上のものはヘッダーとして使用されているため、テーブルの列名を失うことなく下にスクロールできます。2 つ目は、さまざまなセル長を持つ動的に生成されたテーブルです。2 番目のテーブルには、セルの幅を変更する動的入力もあります。一番上のテーブル（ヘッダー）の幅を設定して、一番下のテーブルでセルの長さを動的に変更する方法を見つけようとしていました。私はGoogleを検索しましたが、これを行う静的な方法しか見つかりませんでした. どんな助けでも大歓迎です。完全なコードは、開始するための指示だけではありません。これがテーブルの HTML5 コードです。

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>


 <div style="overflow: auto;height: 22EM; width: 43EM;" class ='FeatureTable'>
  <table style="width: 42EM;" id='tableBody' border='1'>  </table>
4

2 に答える 2

1

theadヘッダーに要素を使用してtbodyから、動的に生成されたコンテンツのコンテナとして要素を使用できます。css を使ってtbodyスクロールする を取得できます - に固定の高さを設定する必要があります<tbody>。たとえばheight: 200px、デザインによって異なります - この場合、すべての<tr>の高さが に設定された高さを超えている<tbody>場合、スクロールバー現れる。必要なのはこれだけなので、設定することをお勧めしoveflow-y: autoます。

これには追加の JavaScript は必要なく、同じテーブルにネストされているため、セルはすべて同じ幅を維持します。

また、2 つの異なるテーブルを用意する必要がなく、その名前が示すように、セマンティックにもアクセシビリティにも意味がtheadあります。tbody

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
<thead>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>
</thead>

<tbody id='tableBody'>
</tbody>
</table>
于 2012-05-30T15:58:53.270 に答える
0

jQuery を使用し、ウィンドウのスクロールとサイズ変更のイベントで、データ テーブル ヘッダー td をループして、その幅をヘッダー テーブルに複製します。

于 2012-05-30T15:52:08.700 に答える