Css：带有多个tbody的固定标题的滚动表 [英] Css: scroll table with fixed header with multiple tbody

问题描述

我需要有固定标题的滚动表。我找到此解决方案如何向HTML5表格添加滚动条？但是，我可以使用它，因为我有多个tbodies。

我需要多个tbody，因为我有rowspan和为了更改行背景颜色我使用 tbody：hover td {background-color： 。;} 。换句话说，当我实施此解决方案时，我需要他们 http://stackoverflow.com/a/15465002/2022068 p>

我的问题 - 我如何使用多个tbody的固定标题滚动表？

解决方案

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

扭曲表中的表里面表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> < aad> < tr> < th>< span class =text>相簿< / 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>  

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 http://stackoverflow.com/a/15465002/2022068

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

解决方案

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>

这篇关于Css：带有多个tbody的固定标题的滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！