Css: scroll table with fixed header with multiple tbody

Question

I need scroll table with fixed header. I found this solution How to add a scrollbar to an HTML5 table? However, I can'it use it as I have multiple tbodies.

I need multiple tbodies as I have rowspan and in order to change row background color I use tbody:hover td{background-color:...;}. By other words I need them as I implement this solution https://stackoverflow.com/a/15465002/2022068

My question - how can I make scroll table with fixed header with multiple tbodies?

score 1 · Accepted Answer · answered Dec 28 '14 at 10:57

demo - http://jsfiddle.net/5KJka/928/

warp the table inside main table td so that the scroll is not effected

    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>

With this approach you pretty much removing the connection between a header cell and a table cell in the same column. If a cell has a bit more content it might not be properly aligned with it's own heading cell. I haven't found any other solution so far tough... — Martin, Jun 15 '15 at 10:40

Css: scroll table with fixed header with multiple tbody

1 Answers1

Linked