用rowpan固定thead

时间:2019-04-11 09:35:29

标签: css html-table fixed-header-tables

我有这张桌子:
enter image description here
我想像这样修复thead:
enter image description here
但我明白了:
enter image description here
这是我的代码:

.table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
}

.table th {
  background: #EEE;
  text-align: left;
}

.table th,
td {
  height: 30px;
}

.fixed_thead {
  table-layout: fixed;
}

.fixed_thead tbody {
  display: block;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.fixed_thead thead tr {
  display: block;
}

.fixed_thead th,
.fixed_thead td {
  width: 200px;
}
<table class="table fixed_thead" border=1>
  <thead>
    <tr>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th colspan=3 style="width:30%; text-align:center; border-bottom:1px solid rgba(0,0,0,.5);">cell</th>
    </tr>
    <tr>
      <th style="width:33.33%;">cell</th>
      <th style="width:33.33%;">cell</th>
      <th style="width:33.33%;">cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tbody>
</table>

我做错了什么?

0 个答案:

没有答案