固定ヘッダーでCSSスクロール可能なテーブルを作成する

Question

2週間前から少し問題がありましたが、私はインターネットとこのサイトを何度も検索していましたが、現在のソリューションのどれもそのトリックをしていないようです。

私はWebアプリケーション（実際にはそのデザインのみ）をアップグレードしようとしています。私は大量の関係と製品のデータ入力として役立つ必要がある別の人からプログラムされたスクロールできないテーブルを持っています。問題は、固定したいヘッダーの可視性ですが、テーブルはスクロール可能です。私はposition:absolute、またはoverflow:scrollなどのCSSコードを試してみましたが、それらのどれもテーブルの右側にスクロールバーを追加していないようです。もし少しでも助けてくれる人があれば、大いに感謝します。ここで私が持っているコードは、これまでのところです：

/* TABLE 
----------------------------------------------------------*/ 

/*table { table-layout: fixed; }*/ 
/*.th, .td { width: 30; break-word: word-wrap;}*/ 

.table 
{ 
    table-layout: fixed; 
    overflow: hidden; 

    border:solid; 
    border-width:thin; 
    border-bottom-style:solid; 
    border-color:Black; 
    table-layout:fixed; 
    border-collapse:collapse; 
    background-color:White; 
} 

.tBody 
{ 
    margin-top:196px; 
} 

.tdVisible 
{ 
    /*font-weight:normal;*/ 
    color:Black; 
    border-spacing:0px; 
    border:solid; 
    border-width:thin; 
    background-color: rgb(229,229,239); 
    break-word: word-wrap; 
} 

.tdHeader 
{ 
    width:40px; 
    break-word: word-wrap; 

    /*min-width:150px;*/ 
    min-width:30px; 

    min-height:60px; 
    /*width:150px; 
    height:126px;*/ 

    border:solid; 
    border-width:thin; 
    font-weight:normal; 
    font-size:12px; 

    /*position:fixed;*/ 
    overflow:hidden; 
    z-index:100; 
    margin-left: -2px; 
    margin-top: -2px; 
} 

.tdRow 
{ 
    /*width:20px; 
    break-word: word-wrap;*/ 
    height:20px; 
    max-height:22px!important; 
} 

.tdRowLast 
{ 
    font-weight:bold!important; 
    text-align:right!important; 
} 

.tdLongID 
{ 
    /*width:60px; 
    min-width: 60px; 
    max-width:60px;*/ 
    width:60px; 
    min-width:60px; 
    max-width:60px; 

    border:solid; 
    border-width:thin; 
} 

.tdItemName 
{ 
    /*width:315px; 
    min-width:315px;*/ 
    width:250px;  
    min-width:250px; 

    border:solid; 
    border-width:thin; 
} 

.tdShortID 
{ 
    width:20px; 
    border:solid; 
    border-width:thin; 
    min-width:20px; 
    max-width:20px; 
} 

.tdCol 
{ 
    /*width:94px;*/ 
    width:40px; 
    break-word: word-wrap; 

    border:solid; 
    border-width:thin; 
    font-weight:normal!important; 
    padding-left: 1px; 
    padding-right: 0px; 
} 

.tdData 
{ 
    height:20px; 
    border:solid; 
    border-width:thin; 
} 

.tdInside 
{ 
    width:20px; 

    border:solid; 
    border-width:thin; 
    background-color: rgb(229,229,229); 
    padding-left:1px; 
    padding-right:1px; 
    text-align:center; 
    break-word: word-wrap; 
} 

だから、右の顧客と製品とそれを作るために、データベースからの読み取りテーブルを作成し、Javascriptが実際にそこにあります。私が変えようとしている唯一のことは、テーブルヘッダーを1つの場所にとどめて、いつでも画面上を見ながらテーブルをスクロールできることです。

お手数ですが、

作品べきで theadと tbodyで

Answer 1

：あなたが最終的にそれを行う方法を

Here a fiddle to start