顯示：塊;導致行寬改變...我無法修復它

Question

有一些簡單的HTML和CSS ...我試圖將表分成塊。其原因實際上是最終我想在此上使用jQuery滑塊。但是，現在我已經簡化了這個問題。以下代碼會使標題行以全寬顯示，而在下面的實體中定義的則縮小並向左推。

如果您只是刪除單行Display：Block;從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(); 
});