ヘッダを固定したテーブルの各項目の横幅を画面に合わせて伸縮させたい

Question

###前提・実現したいこと
asp.netのgridviewでヘッダ固定のスクロール可能なテーブルを作成しています。
このテーブルの幅を変化させたら、ヘッダと検索結果が同じ割合で伸縮するようにしたいのですが、上手くいきません。
Cssでthead,tbodyを固定してスクロール可能にしているのですが、そうするとヘッダの幅が固定されてしまい、伸縮できなくなっている気がします。

###発生している問題・エラーメッセージ
検索結果は伸縮しますが、ヘッダが固定化されているようで幅を伸縮させると、検索結果とヘッダの幅がずれてしまいます。

###ソースコード

        .test thead{
            display:block;
           }
.test tbody{
             display:block;
             overflow-y:scroll;
           }

<asp:GridView ID="grdVideo" 
			  runat="server" 
			  HtmlEncode="False" 
			  OnRowDataBound="grdVideo_RowDataBound" 
			  DataKeyNames="PlaylistID"
    		  UseAccessibleHeader="true" 
    		  AllowSorting="false" 
    		  AutoGenerateColumns="false"
    		  PageSize="1" 
    		  CssClass="tbl_list test" 
    		  height="100%" 
    		  width="98%" 
    		  BorderWidth="0" 
    		  CellPadding="0" 
    		  CellSpacing="0" 
    		  GridLines="None">
    <Columns>
	    <asp:BoundField HeaderText="<%$ Resources:Playlist.PlaylistID %>"  
	                    HtmlEncode="true" 
	                    DataField="PlaylistID" />
	    <asp:BoundField HeaderText="<%$ Resources:Playlist.Name %>"  
	                    HtmlEncode="true" 
	                    DataField="PlaylistName" />
    </Columns>
</asp:GridView>

###補足情報(言語/FW/ツール等のバージョンなど)

Answer 1

（コメントだとコードの整形が使えないので別で回答します）

正しいのかどうか分からないのですが･･･ 試しに

★１
<asp:GridView ID="grdList" runat="server" HtmlEncode="False" _fixedhead="rows:1; cols:2; div-full-mode:yes;">

としてみたら、私の環境では以下のように出力されました。

★２
<div>
  <table cellspacing="0" rules="all" HtmlEncode="False" _fixedhead="rows:1; cols:2; div-full-mode:yes;" border="1" id="grdList" style="border-collapse:collapse;">
   ...

---

ただ、最終的に以下のような形にしたいのですが

★３
<div style="overflow:auto;">
  <table ... _fixedhead="rows:1; cols:2; div-full-mode:yes;">
    ...

★２ を見ると、テーブルの外側に div がついていてこれが邪魔ですね･･･

---

以下のようにして、

★４
<div id="listContainer">
  <asp:GridView ID="grdList" runat="server" HtmlEncode="False" _fixedhead="rows:1; cols:2; div-full-mode:yes;">
    ...

画面表示時に

■ id="listContainer" 直下の div を取って overflow:hidden; を設定
■ その後 FixedMidashi.create();

としてみたところ ぬるっと動きましたが･･･ 微妙ですね･･･

（動きもなんか私の画面で使ってる感じと違う･･･スクロールした後、ワンテンポ遅れて固定ヘッダがぬるっと下がってくる感じ(IE)）

お役に立てずすみません;;

Answer 2

ちょっとずれますが･･･

私は「テーブルの行列を固定してスクロールさせる」のに
FixedMidashi という js ライブラリを使っています。

http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html

GridView に適用したことはないのですが･･･
最終的に普通の HTML の table として出力させるならいけるんじゃないかなと。どうかな。

デモページもあります。div-full-mode=yes で、ブラウザサイズに沿って伸び縮みします。
rowspan/colspan していても OK です。

---

↓ table の横幅が div より広い場合にぶにっと潰れてしまうので指定している css

■ table に table-layout:fixed を指定
■ 各セルに width, min-width を指定。

特別に書いてるのはこれだけかな･･･？
あとは FixedMidashi のサイトに書かれている設定を記述することで
私のところはこれでうまく動いています。参考までに。

Comments

[hoshx]

ご回答ありがとうございます。こちらもためさせていただいてます。
ただ、asp.netのwebコントロールで生成されるtableタグに属性を追加するという方法がわからず、適用できずという状態です。
何かご存知であれば、アドバイスいただけませんか？