html - 标题的宽度未填满整个空间

Question

我有一个表格，其中有一个 div，我正在尝试添加一个标题

<div class="table-responsive">
 <table class="table">
    <thead>
    <div class="topPic"><span><i class="fa fa-tree fa-2x"></i></span></div>
    </thead>
    <tbody>
    <tr>
    <td class="text-center"><h3>Pienet puut</h3></td>

topPic 类是我放图片的地方，它看起来像表格的标题但问题是当表格变成移动尺寸时，右边有一个空间，就像这样。

我不知道为什么我的 CSS 是这样的，但右边还有一个空格。

 .topPic{

    background-color:  rgba(70, 140, 0, 0.9);
    padding: 10px;
    text-align: center;
    width : 100%;
}

如有必要，这里是表格的完整代码。

<div class="table-responsive">
                            <table class="table">
                                <thead>
                                <div class="topPic"><span><i class="fa fa-tree fa-2x"></i></span></div>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center"><h3>Pienet puut</h3></td>
                                        <td >
                                            <div class="form-group pushing-top">
                                                <select name="small-trees-to-cut" class="form-control input-sm ">
                                                    <?php
                                                    for($i=0; $i<=20; $i++) {
                                                    echo("<option value='" . $i . "'>" . $i . "</option>");
                                                    }
                                                    ?>
                                                </select>
                                            </div>

                                        </td>
                                        <td class="text-center" ><h4>Halkaisija 7-10cm<br> korkeus 9-12m<h3></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><h3>Keskisuuret puut</h3></td>
                                        <td>
                                            <div class="form-group pushing-top">
                                                <select name="medium-trees-to-cut" class="form-control input-sm ">
                                                    <?php
                                                        for($i=0; $i<=20; $i++) {
                                                            echo("<option value='" . $i . "'>" . $i . "</option>");
                                                        }
                                                    ?>
                                                </select>
                                            </div>

                                        </td>
                                        <td class="text-center" ><h4>Halkaisija 15-35cm <br>korkeus 12-17m<h3></td>
                                        <td>
                                            <div class="checkbox ">
                                                <label class="pushing-top"><input type="checkbox" name="medium-tree-cutting-crane" value="1">
                                                    <h5>Kiipeilykaato</h5></label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><h3>Suuret puut</h3></td>
                                        <td>
                                            <div class="form-group pushing-top">
                                                <select name="large-trees-to-cut" class="form-control input-sm ">
                                                    <?php
                                                        for($i=0; $i<=20; $i++) {
                                                            echo("<option value='" . $i . "'>" . $i . "</option>");
                                                        }
                                                    ?>
                                                </select>
                                            </div>

                                        </td>
                                        <td class="text-center" ><h4>Halkaisija 35-70cm<br> korkeus 17-28m<h3></td>
                                        <td>
                                            <div class="checkbox ">
                                                <label class="pushing-top"><input type="checkbox" name="big-tree-cutting-crane" value="1">
                                                    <h5>Kiipeilykaato</h5></label>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>

Answer 1

您应该使用 col-span 使表格中的列填充其他列而不是宽度。