Tableタグの横幅指定がIEで無視されるときの対処法

みなさまこんにちは！ウチイダユウゴです。

前回のflex-boxに引き続きですが、IE対応でつまづいた点をメモしておきます…

flex-boxのように比較的新しいものではなく、tableという昔からなじみあるものについて、いまさら知ったことがあります。。。

tableタグの列幅をwidth指定しても、意図通りにならない！
列幅の計算方法を指定するtable-layoutプロパティ
幅指定をしなかった列はどうなる？
まとめ

tableタグの列幅をwidth指定しても、意図通りにならない！

「いまどきtableタグでレイアウトとかないよねー」という声も聞こえてきそうですが、IEへの対応でやむを得ずtableで組まなくてはいけないことが少なくありません！

それから、クライアントが過去から作り続けてきたtableレイアウトの大量のソースを流用する場合とか…ありますよね？

列の横幅とか余白とか、cssでうまく書きたいのですけど、どうにも思った通りに表示されない。

なんでだろ？と思って調べてみたら、table-layoutなるプロパティがあることを知りました。

列幅の計算方法を指定するtable-layoutプロパティ

tableタグは、thやtdに入力された内容を解析して、イイ感じに幅を調整してくれるようになっています。

この自動調整を解除して、widthなどで指定した通りの幅にするのがtable-layout: fixed;　です。

<!DOCTYPE html>
<html>

<head>
    <title>table-layout で列の横幅を指定</title>
</head>

<body>
    <table class="sample" cellspacing="0">
        <tr>
            <td>100px</td>
            <td>200px</td>
            <td>150px</td>
            <td>150px</td>
        </tr>
    </table>

    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        table.sample {
            width: 600px;
            table-layout: auto;
            /* 初期設定：列幅を自動調整 */
            table-layout: fixed;
            /* 自動調整せず、指定した通りの列幅で表示 */
        }

        table.sample td {
            border: 1px;
            border-right-width: 0;
            border-style: solid;
            border-color: #333333;
            text-align: center;
            padding: 1em;
        }

        table.sample td:last-child {
            border-right: 1px solid #333333;
        }

        table.sample td:nth-child(1) {
            width: 100px;
        }

        table.sample tr td:nth-child(2) {
            width: 200px;
        }
    </style>
</body>

</html>