Css: таблица прокрутки с фиксированным заголовком с несколькими tbody

Question

Мне нужна таблица прокрутки с фиксированным заголовком. Я нашел это решение How to add a scrollbar to an HTML5 table? Однако я не могу использовать его, поскольку у меня есть несколько твидов.

Мне нужно несколько твёрдых тел, так как у меня есть ряды и для изменения цвета фона фона используется tbody:hover td{background-color:...;}. Другими словами, я нуждаюсь в них, когда я реализую это решение. https://stackoverflow.com/a/15465002/2022068

Мой вопрос - как я могу сделать таблицу прокрутки с фиксированным заголовком с несколькими твитами?

Answer 1

демо - http://jsfiddle.net/5KJka/928/

деформировать table внутри основного table td так что свиток не производится

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>