html - Bootstrap 表行大小调整错误

Question

我无法使用 Bootstrap 正确格式化表格。我检查了很多次这段代码，但我不知道为什么它看起来不正确。

<table class="table table-striped table-bordered">
    <thead>
        <th>#</th>
        <th>Mecz</th>
        <th>Liga</th>
        <th>Kurs</th>
        <th>Data Rozpoczęcia</th>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <th scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 0px;">
                <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

除了 tbody 内的 th 已被 td 标记关闭外，您的代码似乎工作正常。对 html 代码进行了更正以解决该问题。另一件要检查的事情是可能有其他样式规则似乎覆盖了您的表格样式。您可以尝试禁用其他样式表，只留下 Bootstrap ，看看它是否能解决您的问题。

下面是您的表格的工作演示。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
    <thead>
        <th>#</th>
        <th>Mecz</th>
        <th>Liga</th>
        <th>Kurs</th>
        <th>Data Rozpoczęcia</th>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 0px;">
                <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div>
            </td>
        </tr>
    </tbody>
</table>