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

除了td标签关闭的内部tbody之外，你的代码似乎工作得很好。对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>

Bootstrap表行不良大小

1 个答案: