我如何才能最小化html表中的列宽?

时间:2018-07-16 18:10:45

标签: html css

我有一个这样的桌子

但是我希望选项栏变小

代码(我使用引导程序4):

<table class="table table-bordered table-hover">
                        <thead class="table-primary">
                            <tr class="text-center">
                                <th scope="col">#</th>
                                <th scope="col">Nom</th>
                                <th scope="col" colspan="2">Options</th>
                            </tr>
                            </thead>
                        <tbody class="table-light">
                        <tr class="text-center">    
                                <th scope="row"><?php echo $donnees[0]; ?></th>
                                <td><?php echo $donnees[1]; ?></td>
                                <td><a href="#"><img src="res\images\edit-icon.svg" height="30x" title="modifier"></a></td>
                                <td><a href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
                            </tr>
                            </tbody>
                    </table>

1 个答案:

答案 0 :(得分:0)

一个非常简单的解决方案是将选项标头的width设置为1%。宽度将为1%,或者如果内容较大,则为内容的大小。像这样:

<table class="table table-bordered table-hover">
                    <thead class="table-primary">
                        <tr class="text-center">
                            <th scope="col">#</th>
                            <th scope="col">Nom</th>
                            <th scope="col" colspan="2" width="1%">Options</th>
                        </tr>
                        </thead>
                    <tbody class="table-light">
                    <tr class="text-center">    
                            <th scope="row"><?php echo $donnees[0]; ?></th>
                            <td><?php echo $donnees[1]; ?></td>
                            <td><a href="#"><img src="res\images\edit-icon.svg" height="30x" title="modifier"></a></td>
                            <td><a href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
                        </tr>
                        </tbody>
                </table>