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

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>

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

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

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら