如何保持表頭固定，並不允許它在寬度上縮小

我使用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>

來源

2017-07-03 coffeeak

你可以給標題將設定的寬度分開，並給它一個最大寬度以確保。你爲什麼使用div，而不是table標籤？似乎有點乏味。

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

來源

2017-07-03 15:24:26 salwine

給你的頭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>

來源

2017-07-03 16:54:12 Duannx

如何保持表頭固定，並不允許它在寬度上縮小

回答

相關問題