固定テーブルのヘッダーが本文の列の幅と一致しません

テーブルを垂直スクロールバーにしたいのですが、div内にテーブル全体が含まれてしまい、テーブルの頭を固定位置にしてしまいました。テーブルの中に簡単なスクロールバーを置く簡単な方法があり、テーブルの中央にテーブルを保持しながらテーブルの幅をカットしません。固定テーブルのヘッダーが本文の列の幅と一致しません

thead, tr, th, td, tbody{ 
 
\t border: 1px solid; 
 
\t text-align: center; 
 
\t padding: 3px; 
 
\t 
 
} 
 

 
th{ 
 
\t background-color:#99ccff; 
 
\t height: 40px; 
 
\t font-size: 20px; 
 

 
} 
 

 
tr{ 
 
\t width: 500%; 
 
\t height: 20px; 
 
\t font-size: 17px; 
 
} 
 

 
tr:nth-child(even) { 
 
\t background-color: #CCFFFF; 
 
} 
 
tr:nth-child(odd) { 
 
\t background-color: #fae8d1; 
 
} 
 

 
thead{ 
 
\t position: fixed; 
 
\t width: 1200px; 
 
} 
 
.tbldiv{ 
 
\t width: 1200px; 
 
\t height: 600px; 
 
\t border: 2px solid; 
 
\t overflow: auto; 
 
}

<div class="tbldiv"> 
 
\t <table class="scroll"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th class="col-md-2">Name</th> 
 
\t \t \t \t <th class="col-md-2">Birthday</th> 
 
\t \t \t \t <th class="col-md-2">Gender</th> 
 
\t \t \t \t <th class="col-md-2">Marital</th> 
 
\t \t \t \t <th class="col-md-2">Address</th> 
 
\t \t \t \t <th class="col-md-2">Telephone</th> 
 
\t \t \t \t <th class="col-md-2">Email</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div>

出典

2017-05-19 ejmtv

「固定」されているものがあれば、それは残りの要素と一緒に流れ出します。私はあなたがタイトルを失うことなくテーブルをスクロールできるように固定テーブルのヘッダーが欲しいと思いますか？ –

あなたはCSSを使ってそれを行うことができます。

.table-container { 
 
    height: 10em; 
 
} 
 
table { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
table thead { 
 
    /* head takes the height it requires, 
 
    and it's not scaled when table is resized */ 
 
    flex: 0 0 auto; 
 
    width: calc(100% - 0.9em); 
 
} 
 
table tbody { 
 
    /* body takes all the remaining available space */ 
 
    flex: 1 1 auto; 
 
    display: block; 
 
    overflow-y: scroll; 
 
} 
 
table tbody tr { 
 
    width: 100%; 
 
} 
 
table thead, 
 
table tbody tr { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
/* decorations */ 
 
.table-container { 
 
    border: 1px solid black; 
 
    padding: 0.3em; 
 
} 
 
table { 
 
    border: 1px solid lightgrey; 
 
} 
 
table td, table th { 
 
    padding: 0.3em; 
 
    border: 1px solid lightgrey; 
 
} 
 
table th { 
 
    border: 1px solid grey; 
 
}

<div class="table-container"> 
 
    <table> 
 
     <thead> 
 
      <tr> 
 
       <th>head1</th> 
 
       <th>head2</th> 
 
       <th>head3</th> 
 
       <th>head4</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
      <tr> 
 
       <td>content1</td> 
 
       <td>content2</td> 
 
       <td>content3</td> 
 
       <td>content4</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

出典

2017-05-19 04:50:30 codesayan

あなたはまだ若干右手だと思いますか？ –

はい私はそれをチェックしましたが、それを修正することはできません、私はもう一度これを修正しようとしています。 – codesayan

使用translateの代わりに、このコードを試してみてくださいposition

$(".tbldiv").scroll(function(){ 
 
    var translate = "translate(0," + this.scrollTop + "px)"; 
 
    $('thead').css('transform',translate); 
 
});

thead, tr, th, td, tbody{ 
 
\t border: 1px solid; 
 
\t text-align: center; 
 
\t padding: 3px; 
 
\t 
 
} 
 
table.scroll { 
 
    table-layout: fixed; 
 
} 
 
th{ 
 
\t background-color:#99ccff; 
 
\t height: 40px; 
 
\t font-size: 20px; 
 

 
} 
 

 
tr{ 
 
\t width: 500%; 
 
\t height: 20px; 
 
\t font-size: 17px; 
 
} 
 

 
tr:nth-child(even) { 
 
\t background-color: #CCFFFF; 
 
} 
 
tr:nth-child(odd) { 
 
\t background-color: #fae8d1; 
 
} 
 

 
.tbldiv{ 
 
\t float:left; 
 
\t height: 200px; 
 
\t border: 2px solid; 
 
\t overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="tbldiv"> 
 
\t <table class="scroll"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th class="col-md-2">Name</th> 
 
\t \t \t \t <th class="col-md-2">Birthday</th> 
 
\t \t \t \t <th class="col-md-2">Gender</th> 
 
\t \t \t \t <th class="col-md-2">Marital</th> 
 
\t \t \t \t <th class="col-md-2">Address</th> 
 
\t \t \t \t <th class="col-md-2">Telephone</th> 
 
\t \t \t \t <th class="col-md-2">Email</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div>

出典

2017-05-19 07:27:06 Amal

固定テーブルのヘッダーが本文の列の幅と一致しません

答えて

関連する問題