如何保持表头固定而不允许宽度缩小

Question

我使用div实现了一个表，我希望在垂直滚动时保持标题不变。然而，由于某些原因，页眉宽度似乎缩小了，并且与rows...Using宽度不对齐: 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

您可以为header div设置一个宽度，并为它设置一个最大宽度，以确保这一点。为什么要使用div，而不是table标记？看起来有点乏味。

.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>

​