jquery - 使用jquery，表thead 等于tbody。怎么做？

Question

我有这样的表:

.table {
  width: 300px;
}
thead, tbody {
  display: block;
  table-layout: fixed;
}
tr {
  width: 100%;
}
th {
    border: 1px solid #454545;
    color: #545454;
    background-color: #e4e4e4;
    padding: 2px 6px;
    table-layout: fixed;
}
td {
  border: 1px solid #454545;
  color: #454545;
  padding: 2px 6px;
  background-color: #eeeeee;
  table-layout: fixed;
}

<table cellspacing="0" class="table">
  <thead>
    <tr>
      <th rowspan="2">test1</th>
      <th colspan="2">test2</th>
      <th rowspan="2">test3</th>
    </tr>
    <tr>
      <th>test4</th>
      <th>test5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

我想做:

• td - 1 和 2 等于 th - test1
• td - 3 等于 th - test4
• td - 4 等于 th - test5
• td - 5 和 6 等于 th - test3

我正在寻找 jQuery 解决方案，但也许没有必要。

更多信息:tbody 和 thead 必须使用 display:block，因为 tbody 将来会使用 Overflow-y 滚动。

Answer 1

这很简单。只需在第一个标题行中使用 HTML colspan:

<tr>
      <th rowspan="2" colspan="2">test1</th>
      <th colspan="2">test2</th>
      <th rowspan="2" colspan="2">test3</th>
    </tr>