标题的宽度没有填满整个空间

Question

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

<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是我放置图片并使其看起来像桌子的标题但是问题是当桌子移动到移动尺寸时，右边有一个空格。 < / p>

我不确定为什么即使我的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使表中的列填充其他列而不是宽度。