表示：ブロック;行の幅が変更される原因となる...と私はそれを修正することはできません

Question

いくつかのシンプルなHTMLとCSSを得た...私はブロックにテーブルを分離しようとしている。この理由は、実際にはこれでjQueryスライダを使いたいということです。しかし、今のところ問題を単純化しました。次のコードでは、見出し行が最大幅で表示され、下の本文では縮小されて左にプッシュされます。

単純に1行の表示を削除する場合は、次のようにします。 CSSからすべての行が正しい幅で表示されます。なぜ私は分からない。今数時間それを探していた！

アドバイスありがとうございます。

<table id="spud"> 
    <style type="text/css"> 
    #spud { 
     border-collapse: collapse; 
     width:100%; 
    } 

    #spud th { 
     padding: 10px 8px; 
     border-bottom: 2px solid #6678b1; 
     font-weight: bold; 
    } 

    #spud td { 
     padding: 6px 8px; 
     border-bottom: 1px solid #ccc; 
    } 

    #spud tbody td { 
     text-align:center; 
     width:100%; 
    } 


    #spud .time_period { 
     font-weight: bold; 
     background: #efefef; 
    } 

    #spud .time_period_rows { 
     display:block; 
    } 

    #spud .time_select td:hover { 
     background-color: #b0b0b0; 
    } 

    #spud tbody tr:hover { 
     background: #eee; 
    } 
    </style> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="time_select"> 
      <td id="morning_rows_toggle" class="time_period">Morning</td> 
     </tr> 
    </tbody> 
    <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
    </tbody> 
    <tbody> 
     <tr class="time_select"> 
      <td id="afternoon_rows_toggle" class="time_period">Afternoon</td> 
     </tr> 
    </tbody> 
    <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
    </tbody> 
    <tbody> 
     <tr class="time_select"> 
      <td id="evening_rows_toogle" class="time_period">Evening</td> 
     </tr> 
    </tbody> 
    <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
    </tbody> 
</table> 

Answer 1

あなたのコメントから、私は全体像を理解したと思いますが、あなたのコードは複雑だと思います。 jQueryを使用しているので、スライドアップ/スライドダウンの代わりにaccordionを使用する必要があります。

DEMO

HTML：

<div id="accordion"> 
    <h3 class="time_period"><a href="#">Morning</a></h3> 
    <div> 
     <table> 
     <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     </tbody>     
     </table>   
    </div> 
    <h3 class="time_period"><a href="#">Afternoon</a></h3> 
    <div> 
     <table> 
     <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr>   
     </tbody> 
     </table>   
    </div>  
    <h3 class="time_period"><a href="#">Evening</a></h3> 
    <div> 
     <table> 
     <tbody class="time_period_rows"> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr> 
     <tr><td> row </td></tr>   
     </tbody> 
     </table>   
    </div>  
</div> 

JS：

$(function() { 
    $("#accordion").accordion(); 
});