html - 如何最小化 html 表格中的列宽？

Question

我有一张这样的 table

但我希望选项列像这样小

代码(我使用 bootstrap 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>

Answer 1

一个非常简单的解决方案是将选项 header 的 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>