ホーム(記事一覧)へ

table・tdの幅の仕様と調整方法【html・CSS】

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>

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」を指定します。

ああああああああああああああああああ いいいいい うううううううううううううううううううううううう
<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の幅の仕様と調整方法でした。

関連記事