web-dev-qa-db-ja.com

スクロール可能なdiv内に固定ヘッダーテーブルを作成する方法は？

テーブルのヘッダーを修正したい。テーブルはスクロール可能なdiv内にあります。以下は私のコードです。

<div id="table-wrapper">
    <div id="table-scroll">
        <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Order Date</th>
                    <th>Status</th>
                    <th>Vol Number</th>
                    <th>Bonus Paid</th>
                    <th>Reason for no Bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><%=snd.getOrderId()%></td>
                    <td><%=snd.getDateCaptured()%></td>
                    <td><%=snd.getOrderStatus()%></td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

以下は、上記のdivで使用しているCSSです。

#table-wrapper {
    position:relative;
}

#table-scroll {
    height:250px;
    overflow:auto;  
    margin-top:20px;
}

#table-wrapper table {
    width:100%;
}

#table-wrapper table * {
    background:white;
    color:black;
}

#table-wrapper table thead th .text {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}
csshtmlcss-position
20
Rohan

このようなことはどうですか？ゼロから作りました...

私がやったことは、常に静的なヘッダー用の2つのテーブルと、固定高さのdiv要素を使用してラップしたセルをレンダリングし、スクロールを有効にする2つのテーブルを使用し、 overflow-y: auto;を使用しています

また、table-layout: fixed;なしの文字列が使用されたときにtdが壊れないように、固定幅table要素を持つwhite spaceを使用していることを確認してください。 Word-wrap: break-Word;を使用

デモ

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    Word-wrap: break-Word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>
32
Mr. Alien

これらの答えのいくつかは、不必要に複雑に見えます。 tbodyを作成します。

display: block; height: 300px; overflow-y: auto

次に、thead列とtbody列が同じ幅になるように、各列の幅を手動で設定します。テーブルのstyle = "table-layout：fixed"の設定も必要になる場合があります。

4
Dwayne

thでposition: stickyを使用すると、うまくいきます。

注：theadまたはtrでposition: stickyを使用すると、機能しません。

https://jsfiddle.net/hrg3tmxj/

4
Tenzin Nyima

このようなものが必要だと思いますか？

Like this

.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid    grey;}

</style>

<table class="table">
<thead>
    <tr>
    <th>Judul1</th>
    <th>Judul2</th>
    <th>Judul3</th>
    <th>Judul4</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td colspan="4">
      <div class="table-wrap" >
      <table class="table-dalam">
         <tbody>
             <?php foreach(range(1,10) as $i): ?>
                 <tr >
                     <td class="td-nya">td1 </td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                 </tr> 
            <?php endforeach;?>
        </tbody>
       </table>
     </div>
   </td>
 </tr>
  </tbody>
 </table>

ソース

3
ngakak

これは、htmlとcssを使用した、私の「クランチ」ソリューションです。 2つのテーブルを使用し、テーブルとテーブルセルの幅を固定しました

https://jsfiddle.net/babaikawow/s2xyct24/1/

HTML：

  <div class="container">
<table class="table" border = 1; >  <!-- fixed width header -->
                            <thead >
                                <tr>
                                    <th class="tbDataId" >№</th>
                                    <th class="tbDataName">Працівник</th>
                                    <th class="tbDataData">Дата</th>
                                    <th class="tbDataData">Дійсно до</th>
                                    <th class="tbDataDiseases">Критерій1</th>
                                    <th class="tbDataDiseases">Критерій2</th>
                                    <th class="tbDataDiseases">Критерій3</th>
                                    <th class="tbDataDiseases">Критерій4</th>
                                    <th class="tbDataDiseases">Критерій5</th>  
                                </tr>
                            </thead>  
                        </table> 

                        <div class="scrollTable"> <!-- scrolling block -->
                            <table class="table" border = 1;>
                                 <tbody>
                   <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                                </tbody>
                            </table>
                        </div> 
</div>

CSS：

*{
  box-sizing: border-box;
}

.container{
 width:1000px;
}
.scrollTable{

    overflow: scroll;
  overflow-x: hidden;
    height: 100px;
} 
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse; 

}

/*   Styles of the th and td  */

/* Id */
.tbDataId{
    width:5%;
}

/* Дата,
Дійсно до */
.tbDataData{
    /*width:170px;*/
    width: 15%;
}

/* П І Б */
.tbDataName{
    width: 15%;
}

/*Критерії */
.tbDataDiseases{
    width:10%;
}
1
Babaikawow

私は同じものを必要としており、このソリューションは最もシンプルで簡単な方法で機能しました：

http://www.farinspace.com/jquery-scrollable-table-plugin/

スクロールしたいテーブルにidを渡して、Javascriptに1行入れます。それでおしまい！

ちなみに、最初はスクロール可能なdivを使用したいと考えましたが、それはまったく必要ありません。 divを使用してそれを配置できますが、このソリューションは必要なことだけを行います。つまり、テーブルをスクロールします。

1
adamvagyok

このコードは私から機能します。 jquery.jsファイルを含めます。

<!DOCTYPE html>
<html>

<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){

var contentDivId = "contentDiv";
var headerDivId = "headerDiv";

var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings'); 

/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/

fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
 /*Start : Place header row cell and content table first row cell inside <DIV>*/ 
            var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
            for (k = 0; k < contentFirstRowCells.length; k++) {
                $( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
            }
            var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
            for (k = 0; k < headerFirstRowCells.length; k++) {
                $( headerFirstRowCells[k] ).wrapInner( "<div></div>");
            }
 /*End : Place header row cell and content table first row cell inside <DIV>*/ 

 /*Start : Fix width for columns of header cells and content first ror cells*/
            var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
            var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
            for (i = 0; i < contentColumns.length; i++) {
                if (i == contentColumns.length - 1) {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                else {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                headerCellWidth = headerColumns[i].offsetWidth;
                if(contentCellWidth>headerCellWidth){
                $(headerColumns[i]).css('width', contentCellWidth+"px");
                $(contentColumns[i]).css('width', contentCellWidth+"px");
                }else{
                $(headerColumns[i]).css('width', headerCellWidth+"px");
                $(contentColumns[i]).css('width', headerCellWidth+"px");
                }
            }
/*End : Fix width for columns of header and columns of content table first row*/
}   

    function OnScrollDiv(Scrollablediv) {
    document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
    }
function radioCount(){
    alert(document.form.elements.length);

}   
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>

</head>

<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td><div>Firstname</div></td>
  <td><div>Lastname</div></td>      
  <td><div>Points</div></td>
  </tr>

<tr>
  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr-->

  <tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td>&nbsp;</td>

  <td>Firstname</td>
  <td>Lastname</td>     
  <td>Points</td>
  </tr>

<tr style="height:0px">
<td></td>
  <td></td>
  <td></td>     
  <td></td>
  </tr>

<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
  <td>Jillsddddddddddddddddddddddddddd</td>
  <td>Smith</td>        
  <td>50</td>
  </tr>

<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
</table>
</div>

</form>
</body>

</html>
0
Venugopal

これには StickyTableHeaders.js を使用します。

ヘッダーは透明でした。したがって、このcssを追加してみてください。

thead {
    border-top: none;
    border-bottom: none;
    background-color: #FFF;
}
0
Saajan

A Fiddleそれにもかかわらず、私が理解していることから、もっと役立つはずです、私はあなたが必要とするものは永続的なヘッダーであると思います、これを見てください

http://css-tricks.com/persistent-headers/

0
Sarmad Saleem