Bootstrap4でtableの横幅を列ごとに指定する方法

2020年4月16日2020年9月23日Bootstrap

Bootstrap4でテーブルのthもしくはtdタグに対して、列（セル）ごとに横幅を指定したい時のやり方です

なんか意外とこれ書いてる解説サイト少ないんですが、僕は普通にこのやり方でやってます

<th scope="col" style="width: 10%">10ぱー</th>

要するにstyle属性でwidthをパーセント指定するってわけです

全ての列の数値を合計して100％になるように指定します

テーブル全体のHTML

<table class="table">
    <thead>
        <tr>
            <th scope="col" style="width: 10%">10ぱー</th>
            <th scope="col" style="width: 60%">60パーセントぉおおお</th>
            <th scope="col" style="width: 20%">20ぱーせんとぉ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>狭い</td>
            <td>ひっろーーーい</td>
            <td>少し狭い</td>
        </tr>
    </tbody>
</table>

ちなみにレスポンシブも大丈夫です

スマホ画面でも比率が保たれて表示されます