テーブルヘッダーを固定し、幅を縮めない方法

Question

divを使用してテーブルを実装しました。垂直方向にスクロールするときにヘッダーを固定したままにします。しかし、何らかの理由でヘッダー幅は縮小しているようだと幅を使用して...列に整列していない100％はどちらか動作しません...

.grid-wrapper { 
 
    position: relative; 
 
} 
 

 
.grid { 
 
    background-color: #fff; 
 
    overflow: auto; 
 
    margin-top: 70px; 
 
    height: 60%; 
 
} 
 

 
.gridHeader { 
 
    //display: flex; 
 
    display: table-header-group; 
 
    position: absolute; 
 
    top: -50px; 
 
    z-index: 2; 
 
} 
 

 
.gridHeader .gridCell { 
 
    font-weight: bold; 
 
    color: #334D5C; 
 
    text-decoration: none; 
 
} 
 

 
.gridBody { 
 
    display: table-row-group; 
 
} 
 

 
.gridRow { 
 
    //display: flex; 
 
    display: table-row; 
 
    background-color: #fff; 
 
    min-height: 50px; 
 
    line-height: 30px; 
 
} 
 

 
.gridRow:hover { 
 
    color: #45B29D; 
 
} 
 

 
.gridCell { 
 
    display: table-cell; 
 
    width: calc(100%/7); 
 
    padding: 10px; 
 
    text-align: center; 
 
    word-break: break-all; 
 
    border-width: 0px 0px 1px 0px; 
 
    border-color: #d2d7dc; 
 
    border-style: solid; 
 
}

<div class="grid-wrapper"> 
 
    <div class="grid ui-sortable"> 
 
    <div class="gridHeader"> 
 
     <div id="inline-actions" class="gridCell"></div> 
 
     <div id="title" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="title">title<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="customer" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" 
 
     data-header="customer">customer<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="price" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" 
 
     data-header="price">price<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="calories" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" 
 
     data-header="calories">calories<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="eggless" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" 
 
     data-header="eggless">eggless<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="duedate" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" 
 
     data-header="duedate">duedate<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
    </div> 
 
    <div class="gridBody"> 
 
     <div class="gridRow" data-recordnumber="0"> 
 
     <div class="gridCell" data-recordnumber="0"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Chocolate Pancakes With Fruits</div> 
 
     <div class="gridCell">Bilbo Baggins</div> 
 
     <div class="gridCell">300</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-04</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="1"> 
 
     <div class="gridCell" data-recordnumber="1"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon Sugar Fried Apples</div> 
 
     <div class="gridCell">Frodo Baggins</div> 
 
     <div class="gridCell">200</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-06</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="2"> 
 
     <div class="gridCell" data-recordnumber="2"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon-Apple Bread</div> 
 
     <div class="gridCell">Tony Stark</div> 
 
     <div class="gridCell">250</div> 
 
     <div class="gridCell">1500</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-08</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="3"> 
 
     <div class="gridCell" data-recordnumber="3"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Pecan Tart</div> 
 
     <div class="gridCell">Scrats Squirrel</div> 
 
     <div class="gridCell">210</div> 
 
     <div class="gridCell">1999</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-08</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="4"> 
 
     <div class="gridCell" data-recordnumber="4"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon, Apple, Oatmeal Cake</div> 
 
     <div class="gridCell">Bruce Banner</div> 
 
     <div class="gridCell">390</div> 
 
     <div class="gridCell">2007.07</div> 
 
     <div class="gridCell">false</div> 
 
     <div class="gridCell">2017-07-09</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="5"> 
 
     <div class="gridCell" data-recordnumber="5"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Chocolate Pancakes With Fruits</div> 
 
     <div class="gridCell">Bilbo Baggins</div> 
 
     <div class="gridCell">300</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-04</div> 
 
     </div> 
 
    
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは与えることができますヘッダーは設定された幅を分割し、最大の幅を確保します。なぜあなたはテーブルタグではなくdivを使用していますか？ちょっと退屈だと思う。

.gridHeader { 
    //display: flex; 
    display: table-header-group; 
    position: absolute; 
    top: -50px; 
    z-index: 2; 
    width: 50px; 
    max-width: 50px; 
} 

Answer 2

あなたのヘッダ付けdisplay: table; width: 100%とposition: fixed;

.grid-wrapper { 
 
    position: relative; 
 
} 
 

 
.grid { 
 
    background-color: #fff; 
 
    overflow: auto; 
 
    margin-top: 70px; 
 
    height: 60%; 
 
} 
 

 
.gridHeader { 
 
    display: table; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
    width: 100%; 
 
} 
 

 
.gridHeader .gridCell { 
 
    font-weight: bold; 
 
    color: #334D5C; 
 
    text-decoration: none; 
 
} 
 

 
.gridBody { 
 
    display: table-row-group; 
 
} 
 

 
.gridRow { 
 
    //display: flex; 
 
    display: table-row; 
 
    background-color: #fff; 
 
    min-height: 50px; 
 
    line-height: 30px; 
 
} 
 

 
.gridRow:hover { 
 
    color: #45B29D; 
 
} 
 

 
.gridCell { 
 
    display: table-cell; 
 
    width: calc(100%/7); 
 
    padding: 10px; 
 
    text-align: center; 
 
    word-break: break-all; 
 
    border-width: 0px 0px 1px 0px; 
 
    border-color: #d2d7dc; 
 
    border-style: solid; 
 
}

<div class="grid-wrapper"> 
 
    <div class="grid ui-sortable"> 
 
    <div class="gridHeader"> 
 
     <div id="inline-actions" class="gridCell"></div> 
 
     <div id="title" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="title">title<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="customer" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="customer">customer<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="price" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="price">price<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="calories" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="calories">calories<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="eggless" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="eggless">eggless<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
     <div id="duedate" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="duedate">duedate<i id="sort-icon" class="fa fa-sort"></i><i id="exchange-columns" class="fa fa-exchange"></i></div> 
 
    </div> 
 
    <div class="gridBody"> 
 
     <div class="gridRow" data-recordnumber="0"> 
 
     <div class="gridCell" data-recordnumber="0"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Chocolate Pancakes With Fruits</div> 
 
     <div class="gridCell">Bilbo Baggins</div> 
 
     <div class="gridCell">300</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-04</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="1"> 
 
     <div class="gridCell" data-recordnumber="1"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon Sugar Fried Apples</div> 
 
     <div class="gridCell">Frodo Baggins</div> 
 
     <div class="gridCell">200</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-06</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="2"> 
 
     <div class="gridCell" data-recordnumber="2"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon-Apple Bread</div> 
 
     <div class="gridCell">Tony Stark</div> 
 
     <div class="gridCell">250</div> 
 
     <div class="gridCell">1500</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-08</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="3"> 
 
     <div class="gridCell" data-recordnumber="3"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Pecan Tart</div> 
 
     <div class="gridCell">Scrats Squirrel</div> 
 
     <div class="gridCell">210</div> 
 
     <div class="gridCell">1999</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-08</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="4"> 
 
     <div class="gridCell" data-recordnumber="4"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Cinnamon, Apple, Oatmeal Cake</div> 
 
     <div class="gridCell">Bruce Banner</div> 
 
     <div class="gridCell">390</div> 
 
     <div class="gridCell">2007.07</div> 
 
     <div class="gridCell">false</div> 
 
     <div class="gridCell">2017-07-09</div> 
 
     </div> 
 
     <div class="gridRow" data-recordnumber="5"> 
 
     <div class="gridCell" data-recordnumber="5"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div> 
 
     <div class="gridCell">Chocolate Pancakes With Fruits</div> 
 
     <div class="gridCell">Bilbo Baggins</div> 
 
     <div class="gridCell">300</div> 
 
     <div class="gridCell">1997.07</div> 
 
     <div class="gridCell">true</div> 
 
     <div class="gridCell">2017-07-04</div> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>