Дисплей: блок; вызывает изменение ширины строки ... и я не могу это исправить

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();
});