Html 显示：块；导致行宽度更改。。。而我无法修复它

有一些简单的HTML和CSS。。。我正试着把桌子分成几块。这样做的原因实际上是，最终我想在这个问题上使用jQuery滑块。然而，现在我已经简化了这个问题。下面的代码使标题行以全宽显示，而在下面的正文中定义的标题行将收缩并推到左侧

如果只是删除单行显示：块；从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>

---

从你的评论中，我想我理解了整个情况，但我认为你把代码复杂化了。因为您使用的是jQuery，所以应该使用而不是向上/向下滑动

HTML:

---

您试图达到的效果是什么？为什么要在表格中嵌入样式块？表格单元格不能在表格单元格上显示为块无框模型。它们的自然行为是：display:table-cell；所有内容都以相同的宽度显示。这正是我想要的。但是，我需要显示：块；因为jQuery滑块需要它。。。简而言之，有没有一种方法可以保持显示：阻塞；在其中，并恢复所有行的全宽。谢谢，我想把桌子分成几块->我不太明白这个？你的目标是什么？谢谢SKS。我试试看。手风琴听起来正是我想要达到的！非常感谢。

<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>

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