尝试在使用固定表头时设置列宽

Question

我需要有固定的表头。我使用了

中的代码

https://github.com/joshmarinacci/css-tables-demo/blob/master/test1.html

我似乎无法弄清楚如何设置列的各个宽度。我相信它与webkit的使用有关。

我在

的jsfiddle中有css和html

https://jsfiddle.net/cmendla/g6dym70f/3/

.scrolltable {
  overflow-x: scroll;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.scrolltable>.header {}

.scrolltable>.body {
  /*noinspection CssInvalidPropertyValue*/
  width: -webkit-fit-content;
  overflow-y: scroll;
  flex: 1;
  -webkit-flex: 1;
}

th,
td {
  min-width: 150px;
}


/* an outside constraint to react against */

#constrainer {
  width: 400px;
  height: 200px;
}

#constrainer2 {
  width: 400px;
  overflow-x: scroll;
}

#constrainer2 table {
  overflow-y: scroll;
}

#constrainer2 tbody {
  overflow-x: scroll;
  display: block;
  height: 200px;
}

#constrainer2 thead {
  display: table-row;
}


/* only styling below here */

#constrainer,
#constrainer2 {
  border: 1px solid lightgrey;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
}

th {
  background-color: lightgrey;
  border-width: 1px;
}

td {
  border-width: 1px;
}

tr:first-child td {
  border-top-width: 0;
}

tr:nth-child(even) {
  background-color: #eee;
}

<div id="constrainer">
  <div class="scrolltable">
    <table class="header">
      <thead>
        <tr>
          <th width="50px">ID</th>
          <th width="150px">Start time</th>
          <th width="150px">End time</th>
          <th width="150px">Sales order</th>
          <th>Item</th>
          <th>Number of rolls fill</th>
          <th>Width fill</th>
          <th>Length fill</th>
        </tr>
      </thead>
    </table>
    <div class="body">
      <table>
        <tbody>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
          <tr>
            <td width="50px">ID</td>
            <td width="150px">Start time</td>
            <td width="150px">End time</td>
            <td width="150px">Sales order</td>
            <td>Item</td>
            <td>Number of rolls fill</td>
            <td>Width fill</td>
            <td>Length fill</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>