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

Question

I have a table, with a div which I am trying to add a header

<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>

and the class topPic is where I put a picture and make it look like a header for a table But the problem is when the table goes to mobile size there is a space on the right like this.

I am not sure why is there a space on the right even when my CSS is like this.

 .topPic{

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

Here is the whole code for the table if its necessary.

<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使表中的一列填充其他列而不是宽度。