Question

我在引导程序中使用它。表显示正常但是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>元素与no不匹配。表体<tbody>中的列数。

所以你需要在表头<th></th>内放一个额外的<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>

CSS / Bootstrap无法正确定型

1 个答案: