テーブルタグの結合とその厳密な幅指定方法のワザ

HTML CSS

ということでワザです。これって定番のワザなのか知りませんが、自分で思いついたときはばかばかしさに笑えました。

まずセルの結合

セルは

<table>
    <tr>
        <th colspan="2" >名前</th>
        <th>性別</th>
        <th>住所</th>
        <th>プロフィール（自己紹介）</th>
    </tr>
    <tr>
        <td>チャンピオン山</td>
        <td>カレー郎</td>
        <td>男</td>
        <td>東京都港区</td>
        <td>自己紹介です。趣味はホゲゲゲゲゲゲゲ。</td>
    </tr>
</table>

colspan属性で結合の幅を指定すると結合できますね。っていうか結合ってよりも2個分のセルを突っ込むことになります

こういう風に特にヘッダ行は結合することがおおいですね。

幅縛り

テーブルって内容物によって、伸縮するので、ほとんど全部定型なんだけど、1個だけ大幅に増減するカラム（今なら自己紹介）があると、データ量によって他のカラムも伸縮の影響をうけるので見難くなりますね

だからこういうときにある程度データの見え方を想定して幅を縛ってしまいます。

    <tr>
        <td style="width:50px;">ラーメン山</td>
        <td style="width:50px;">二郎</td>
        <td style="width:20px;">男</td>
        <td style="width:100px;">東京都港区</td>
        <td style="widht:100px;">自己紹介です。趣味はホゲゲゲゲゲゲゲ。</td>
    </tr>

こんな風に

え・・・これでもできるんだけど、なんかtd1行に幅指定ってナンセンスだし、かといって全部に指定するのはもっとナンセンスだし、ヘッダ行は結合していて個別の幅指定が出来ないし、プログラムが生成するHTMLに組み込むとき面倒だし・・・・だからワザです。

ワザ

こうします

table{
    table-layout:fixed;
}

    <tr style="visibility:collapse;">
        <th style="width:50px;"></th>
        <th style="width:50px;"></th>
        <th style="width:20px;"></th>
        <th style="width:100px;"></th>
        <th style="widht:100px;"></th>
    </tr>
    <tr>
        <td>第七山</td>
        <td>ギョウザ郎</td>
        <td>男</td>
        <td>東京都港区</td>
        <td>自己紹介です。趣味はホゲゲゲゲゲゲゲ。</td>
    </tr>

一番上に不可視行を突っ込んでそれに対してスタイルを当てます。当然fixedにしてます。こうするとヘッダのセルの結合をしていても個別に幅指定できるし、内容物とかpaddingとかにも影響受けず、厳密に指定できる。

さらにこの行をコピペするだけで、内容物に関係ないビッチリ幅指定が出来るので、二つのテーブルをビッチリくっつけるとかがヘッダにこの隠し行を入れるだけで出来ますね
詳しい例↓
HTML/テーブルタグのセルの結合とそのスタイル - 俺の基地