Question

获得了一些简单的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>

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

显示：块;导致行宽改变...我无法修复它

1 个答案: