【html･CSS】table･tdの幅(width)の仕様と指定方法

tableやtdの幅って縮んだり伸びたり、指定した通りの幅にならなかったりとよくわからないですよね？

table･tdの幅の仕様と指定方法についてまとめました。

下記関連記事も参考にしてください。

tableにwidthを指定しないとき

内容量に合わせて自動で幅が調整される

内容量が少ないときは幅の小さい表になります。

あああ

いいい

内容量が多いときは親の幅いっぱいの表になります。親の幅を超えません。

あああああああああああああああああああああああああああ

いいいいいいいいいいいいいいいいいいいいいいいいいいい

margin:autoで中央寄せができる

margin:autoで中央寄せするには本来widthの指定が必須ですが、tableに限ってはwidthがなくても中央寄せ可能です。

マス1

マス2

<style>
.example2{
    margin: auto;
}
</style>
<table border="1" class="example2">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
</table>

table幅指定方法

下記の方法でtableの幅を指定できます。親の幅を超えることがあります。

html5からはCSSでの指定が推奨されています。

【html】width属性

htmlだけで幅を指定するにはwidth属性を指定します。

width属性は基本的に単位をつけません。px指定です。

マス1

マス2

<table width="250" border="1">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
</table>

一応%をつけることで%指定も可能です。emやvwなどの単位は指定不可能です。

マス1

マス2

<table width="50%" border="1">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
</table>

【CSS】width

CSSで幅を指定するにはwidthを指定します。

単位は必須です。

マス1

マス2

<style>
.example{
    width: 250px;
}
</style>
<table border="1" class="example">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
</table>

CSSのwidthについて詳しくはこちら↓

widthにborderが含まれる

divなどではwidthにborderは含まれませんが、tableの場合はwidthにborderが含まれます。

マス1

マス2

<style>
.example3{
    width: 200px;
    border: 10px solid #333;
}
</style>
<table class="example3">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
</table>

上記は線の幅10pxで全体の幅200pxを指定しています。この場合線の内側のサイズは両端の線の幅を引いた180pxになります。

td（列）に幅widthを指定しないとき

以下tdについて解説しますが、thも同じです。

列の中で一番長いテキストに合わせて自動で幅が調整される

table同様、内容量で幅が大きくなります。その基準は列の中で一番長い箇所が基準となります。

なお、br等で改行した場合、その一行の長さが基準となります。

ああああああああああ	いいいい	うううううううう
あ	い	う
あああ	いいいいいいい	ううう

<table border="1">
    <tr>
        <td>ああああああああああ</td><td>いいいい</td><td>うううううううう</td>
    </tr>
    <tr>
        <td>あ</td><td>い</td><td>う
        </td>
    </tr>
    <tr>
        <td>あああ</td><td>いいいいいいい</td><td>ううう</td>
    </tr>
</table>

tdの幅指定方法

【html】width属性

htmlだけで幅を指定するにはwidth属性を指定します。

width属性は基本的に単位をつけません。px指定です。

マス1

マス2

<table border="1">
    <tr>
        <td width="250">マス1</td><td>マス2</td>
    </tr>
</table>

一応%をつけることで%指定も可能です。emやvwなどの単位は指定不可能です。

%はtable幅を基準とした割合のサイズとなります。

マス1

マス2

<table width="250px" border="1">
    <tr>
        <td width="70%">マス1</td><td>マス2</td>
    </tr>
</table>

【CSS】width

CSSで幅を指定するにはwidthを指定します。

単位は必須です。

マス1

マス2

<style>
.example4{
    width: 200px;
}
</style>
<table border="1">
    <tr>
        <td class="example4">マス1</td><td>マス2</td>
    </tr>
</table>

widthにpadding･borderを含まない

tableではwidthにborderが含まれますが、tdはwidthにborder･paddingを含みません。

マス1

マス2

<style>
.example5{
    width: 200px;
    border: 10px solid #333;
    padding: 10px;
}
</style>
<table>
    <tr>
        <td class="example5">マス1</td><td>マス2</td>
    </tr>
</table>

上記はwidth: 200px、線の幅10px、padding10px指定しており、線を含んだ全体のサイズは240pxになっています。

「box-sizing: border-box」を指定すればwidthにpadding･borderを含めることができます。

td幅の調整

td幅の一部を指定したとき

指定した列だけ指定サイズになり、残りはテキスト幅に合わせて幅が変わります。

下記は左の列にwidth="100"を指定した例です。

widthを指定していない真ん中と右は内容量に合わせて変化します。

width100	いいいい	うううううううううううううううう
あ	い	う
あああ	いいいいいいいいいいいいいい	ううう

<table border="1">
    <tr>
        <td width="100">width100</td><td>いいいい</td><td>うううううううううううううううう</td>
    </tr>
    <tr>
        <td>あ</td><td>い</td><td>う
        </td>
    </tr>
    <tr>
        <td>あああ</td><td>いいいいいいいいいいいいいい</td><td>ううう</td>
    </tr>
</table>

td幅の合計値とtable幅があっていないとき

table幅が優先され、そのうえで指定された数値の割合に合わせて変化します。

ああああああああああ

いいいい

うううううううううううううううう

<table border="1" width="250">
    <tr>
        <td width="100">ああああああああああ</td>
        <td width="50">いいいい</td>
        <td width="200">うううううううううううううううう</td>
    </tr>
</table>

上記の場合tableのwidthに250pxが指定されその通りになっています。

tdのwidthは100,50,200と合計が350でありtable幅を超えています。

このとき指定された幅の割合2:1:4に合わせて幅が再調整されます。

そのうえ内容量によってtdに多少変化します。

かなりややこしいのでtable幅とtdの合計値は合わせましょう。

td幅の固定方法

tableに「width」と「table-layout: fixed」を指定します。

「table-layout: fixed」はテキスト量による自動調整をなくします。

日本語の場合、基本的にはwidthの指定でちゃんと固定されます。

英語の場合、まとまりができるためwidthが無視される場合があります。

そんなときは「table-layout: fixed」が役に立ちます。

table-layout: fixed指定なし

width="100"

いいいいい

うううううううううううううううううううううううう

table-layout: fixed指定あり

width="100"

いいいいい

うううううううううううううううううううううううう

<style>
.example6{
    width: 100%;
    table-layout: fixed;
}
.example6 td:first-child{
    width: 100px;
}
</style>
<table class="example6" border="1">
    <tr>
        <td>width="100"</td>
        <td>いいいいい</td>
        <td>うううううううううううううううううううううううう</td>
    </tr>
</table>

英字を途中で折り返すには「word-wrap: break-word」の指定も必要です。

tdを均等幅にする方法

tableに「width」と「table-layout: fixed」を指定します。

「table-layout: fixed」はテキスト量による自動調整をなくします。

そのうえでwidthを指定しないtdを均等幅に調整します。

table-layout: fixed指定なし

ああああああああああああああああああ

いいいいい

うううううううううううううううううううううううう

table-layout: fixed指定あり

ああああああああああああああああああ

いいいいい

うううううううううううううううううううううううう

<style>
.example7{
    width: 100%;
    table-layout: fixed;
}
</style>
<table class="example7" border="1">
    <tr>
        <td>ああああああああああああああああああ</td>
        <td>いいいいい</td>
        <td>うううううううううううううううううううううううう</td>
    </tr>
</table>

td内テキストを折り返させない方法

「white-space: nowrap」を指定します。

下記は一列目のtdにwhite-space: nowrapを指定した例です。

ああああああああああああああああああ

いいいいい

うううううううううううううううううううううううう

<style>
.example8 td:first-child{
    white-space: nowrap;
}
</style>
<table class="example8" border="1">
    <tr>
        <td>ああああああああああああああああああ</td>
        <td>いいいいい</td>
        <td>うううううううううううううううううううううううう</td>
    </tr>
</table>

まとめ

table、tdはwidth属性かCSSのwidthで幅を調節する。

widthについてtableはborderを含み、tdは含まない。

tableに「width」と「table-layout: fixed」を指定するとテキスト幅による自動調整がなくなる。これにより幅の固定化や、均等化が可能。

以上、table･tdの幅の仕様と指定方法でした。