HTML - tbody - 显示块问题

Question

我有一个包含多行的表，我每行下面都有“子表”。为了产生子表的平滑滑动效果，我将子表分组到tbody并将其设置为显示块。

只有这样做，整个子表格才能顺畅地上下滑动。

问题是，当tbody设置为显示块时，除了第一行之外，“head-table”的每一行都不与th一致。如果我删除显示块，一切都很好，但幻灯片效果不起作用。

有解决方法吗？ （“子表格”的整个主体应平滑，而不是每行/数据。请参阅fiddle （CSS第9行）

如果标题更长一些，则只会发生行不符合行的效果。

我想要的是什么：

- 所有行都在行中（以th为导向），就像第一行一样 - 就像普通表一样

- 整个“子表格”的滑动效果将会顺利进行。

谢谢！我只能同时实现其中一个标准而不是展位。小提琴显示平滑的滑动效果，如果您在CSS处删除第9行，您将看到其他条件已启用，但幻灯片不起作用。

HTML

  <div id="sh_details">
     <div class="sh_wasserzeichen"></div>
     <article>
       <dl id="sh_accordion">
         <dt id="sh_2016"><div>Headline1</div></dt>
      <dd><table>

         <tr>
             <th>Tes22222222t</th>
            <th>Test</th>
             <th>Test</th>
              <th>Test333333333</th>
             <th>Test</th>
              <th>TestABCD</th>
             <th>Test</th>

          </tr>
          <tr>
           <td class="inhalt">Inhalt1</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
          </tr>

          <!--Untertabelle1-->
         <tbody class="table2">
           <tr>
                   <th>Test22222222</th>
               <th>Test</th>
                <th>Test33333</th>
                 <th>Test</th>
                 <th>Test</th>
                  <th>Test</th>
                 <th>Test</th>
                  <th>123454657</th>
          </tr>

           <tr>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>

          </tr>

          <tr>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>

          </tr>
        </tbody> 
          <tr>
            <td class="inhalt">Inhalt4</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>

          </tr>
        <tbody class="table2">
           <tr>
                  <th>Test</th>
                  <th>Test</th>
                   <th>Test</th>
                   <th>Test</th>
                  <th>Test</th>
                   <th>Test</th>
                   <th>Test</th>
                  <th>123456789</th>
             </tr>
             <tr>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>

            </tr>
          </tbody>


       </table></dd>

         <dt id="sh_january">Headline2</dt>
         <dd>125153226262</dd>
       </dl>
     </article>
  </div>

CSS

#sh_details {background-color:#fff;position: relative; top:0;left:0;width:100%; height: 100%; overflow:hidden;}
.table2 {display:none;color:white;font-size:11px;background-color:#888;}
.table2_active {background-color:#ff6600; color:white;}
tr,td,th {text-align: left;padding:0.5%;width: 1%; height:auto; margin:auto;}
tbody:not(.table2) tr td:first-child:hover {background-color:#ff6600; color:white;}
table {width: 100%; height: 100%}

/* TBODY */
tbody {display:block;}

.sh_active {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
article  {absolute;color: black;width: 100%; height: auto;margin: 0 auto 0 auto;}
dt, dd {padding:0.5%;width: 90%; height:auto;float: left; margin:0;border-top:1px solid #222;}
dt {font-weight:bold;text-transform: uppercase; background-color:black; color:#ff6600; cursor:pointer;}
dt:first-child {border:none;}
dt:hover {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
dd {background-color:#444; line-height:25px; word-spacing:3px;color:#BBB; display:none;}