html - CSS/Bootstrap 无法正确设置样式

Question

我将其与 Bootstrap 一起使用。表格显示正常，但 thead 和 tbody 行的宽度有问题，您可以看到它们的宽度小于整个列的宽度。

如果您单击面板头部，您会看到线条暂时处于正确的大小。我该如何解决这个问题。

                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
                    <!-- Table -->
                    <table class="table collapse" id="collapse1">
                        <thead>
                            <tr>
                                <th>Number</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody> 
                            <tr>
                                <th scope="row">1</th>
                                <td>this is a shop</td>
                                <td><a href="#">Go to</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

Answer 1

那么你的问题是没有。列的数量，即 <th></th>表头中的元素 <thead>与编号不符。表体中的列数 <tbody> .

所以你需要多放一个<th></th>内 table 头<thead>这可能是这样的空白-

Your code Fiddle

Updated Working Fiddle使用以下代码 -

       <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
            <!-- Table -->
            <table class="table collapse" id="collapse1">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody> 
                    <tr>
                        <th scope="row">1</th>
                        <td>this is a shop</td>
                        <td><a href="#">Go to</a></td>
                    </tr>
                </tbody>
            </table>
        </div>