Css：具有多个tbody的固定标题的滚动表

Question

我需要带有固定标题的滚动表。我找到了这个解决方案How to add a scrollbar to an HTML5 table? 但是，我不能使用它，因为我有多个 tbodies。

我需要多个 tbodies，因为我有行跨度，为了更改行背景颜色，我使用 tbody:hover td{background-color:...;}。换句话说，我在实施此解决方案时需要它们https://stackoverflow.com/a/15465002/2022068

我的问题 - 如何制作带有多个 tbodies 的固定标题的滚动表？

Answer 1

演示 - http://jsfiddle.net/5KJka/928/

在主table td 内扭曲table 以使滚动不受影响

    table.main {
      display: table;
      width: 100%;
    }
    table.main > thead,
    table.main > tbody {
      float: left;
      width: 100%;
    }
    table.main > tbody {
      overflow: auto;
      height: 150px;
    }
    table tr {
      width: 100%;
      display: table;
      text-align: left;
    }
    table th,
    table td {
      width: 33%;
    }
    table.main table tbody:nth-child(odd) {
      background: #CCC;
    }
    table.main table tbody:hover td[rowspan],
    table.main table tr:hover td {
      background: red;
    }
    table.main table {
      width: 100%;
      border-collapse: collapse;
    }
    table.main table td,
    table.main table th {
      padding: 20px;
      border: 1px solid black;
    }

<table class="main">
  <thead>
    <tr>
      <th><span class="text">album</span>

      </th>
      <th><span class="text">song</span>

      </th>
      <th><span class="text">genre</span>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
              <td>test</td>
              <td>test</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>