CSS table,td,divなどwidthが効かない原因と解決方法

widthは要素の幅を指定するCSSです。

「widthを指定したのにまったく変わってない!」

「widthを指定しても勝手に幅が変わる!」

そんなcss widthが効かない原因と解決方法についてtable,td,div,a,span,flex,li,imgタグとhtmlタグケース別に解説します。

max-width,min-widthが効かない理由も解説します。

【table,tdのwidthが効かないとき】固定化されていないから

table内のtdはその内容量とtableの幅により自動で幅が決まります。

日本語の場合はwidth指定で固定できますが、td内に英字があるときwidthが無視されることがあります。

下記の例では左の列に「width: 100px」を指定していますが、英字が折り返されず100pxを超えています。

width="100"

いいいいい

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

【解決】table-layout: fixedを指定する

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

「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」の指定も必要です。

【table,tdのwidthが効かないとき2】
widthの合計が合っていないから

table内のtdはその内容量とtableの幅により自動で幅が決まります。

tdにwidthを指定することはできるのですが、td(列)の幅の合計値がtableの幅と一致しない場合、tdの幅が自動調整されてしまいます。

下記はtable幅100%に対して左列80%、右列80%を指定した例です。

80%	80%
指定なし	指定なし

<table border="1" width="100%">
    <tr>
        <td width="80%">80%</td>
        <td width="80%">80%</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

【解決】再計算かwidthを指定しないtdを用意する

方法1.単純に足し算が間違っていたのなら再計算して直しましょう。

下記は30%と70%で合計100%です。

30%	70%
指定なし	指定なし

<table border="1" width="100%">
    <tr>
        <td width="30%">30%</td>
        <td width="70%">70%</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

特にレスポンシブ対応の場合、px指定はせずに%指定をしたり、calcを使った幅の指定をしましょう。

方法2.widthを指定しないtdを1列以上用意しましょう。

widthを指定しない列の幅は「tableの幅-他の指定されたtdの幅」で自動計算されます。

下記は左列をpx指定し、右列を指定しない例です。

右列はtableの幅-左列の幅、つまり100%-200pxの幅になります。

200px（固定）	指定なし（伸縮）
指定なし	指定なし

<table border="1" width="100%">
    <tr>
        <td width="200">200px（固定）</td>
        <td>指定なし（伸縮）</td>
    </tr>
    <tr>
        <td>指定なし</td>
        <td>指定なし</td>
    </tr>
</table>

tableはwidthの仕様が少し複雑です。下記記事を参考にしてください。

【imgのwidthが効かないとき】

画像imgのwidthが効かない場合はさまざまな原因が考えられるため別記事にまとめました。

【a,spanのwidthが効かないとき】
インライン要素にwidthは指定できないから

aタグやspanはインライン要素といって文字を扱う要素です。インライン要素にwidthを指定することはできません。（imgを除く）

width効かない

<style>
.example{
    width: 300px;
    border: 1px solid #999;
    padding: 5px;
    background: #f2f2f2;
}
</style>
<a href="#" class="example">width効かない</a>

「そもそもインライン要素って何？」という方はこちら↓

【解決】display:blockを指定する

ブロック要素ならwidthを指定することができます。display:blockを指定するとaタグやspanでもブロック要素にできwidthを指定できるようになります。

前後に文字を置けるようにしたいなら「display:inline-block」でもOKです。

width効く

<style>
.example2{
    /*コレ*/display: block;
    width: 300px;
    border: 1px solid #999;
    padding: 5px;
    background: #f2f2f2;
}
</style>
<a href="#" class="example2">width効く</a>

【flexのwidthが効かないとき】
widthの合計が合っていないから

display:flexは子要素を横並びさせるCSSです。

tableと似ています。

子要素の幅の合計が親の幅より小さい場合は指定したサイズになりますが、子要素の幅の合計が親の幅より大きく、かつ改行を許可していない場合は子要素の幅は自動で計算されます。

下記はブラウザ幅が大きいときはwidthが合っていますが、ブラウザ幅を狭くし100%を超えるとwidthが合わなくなります。

<style>
.example3{
    display: flex;
}
.example3,.example3>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example3">
    <div style="width:500px">500px</div>
    <div style="width:150px">150px</div>
</div>

【解決】再計算か改行する

解決方法もtableと似ています。

方法1.単純に足し算が間違っていたのなら再計算して直しましょう。

特にレスポンシブ対応の場合、px指定はせずに%指定をしたり、calcを使った幅の指定をしましょう。

<style>
.example4{
    display: flex;
}
.example4,.example4>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example4">
    <div style="width:30%">30%</div>
    <div style="width:70%">70%</div>
</div>

方法2.改行させてでもwidthが優先なら改行させましょう。

display:flexを指定した要素に「flex-wrap: wrap」を指定するとその子要素の幅の合計が親要素の幅を超えた時点で改行されるようになります。

<style>
.example5{
    /*コレ*/flex-wrap: wrap;
    display: flex;
}
.example5,.example5>div{
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example5">
    <div style="width:500px">500px</div>
    <div style="width:150px">150px</div>
</div>

【liのwidthが効かないとき】
display:flexになっていないか確認

liは本来ブロック要素であり、widthは普通効きます。

ただし、横並べするためなどでulにdisplay:flexを指定していると上記の【flexのwidthが効かないとき】と同じ現象になります。

解決方法も上記と同じです。

【上記以外1】displayの値が違うから

CSSのdisplayを使うとdivなどのブロック要素でもインライン要素などにすることができます。

先述したようにインライン要素ではwidthを指定できません。

【解決】inline-blockかblockを指定

widthを指定したいならinline-blockかblockを指定しましょう。

	width指定なし	widthの指定
display:inline	内容と同じ幅	不可能
display:inline-block	内容と同じ幅	可能
display:block	親要素と同じ幅	可能

【上記以外2】paddingやborderはwidthに含まれないから

widthを50%と指定していてもpaddingやborderはwidthに含まれないため、全体のサイズは50%を超えてしまいます。

【解決】box-sizing:border-boxを指定

「box-sizing: border-box」を指定すると全体の幅をwidthとして指定できます。

box-sizing: border-boxなし（width:50%）

<style>
.example8{
    width: 50%;
    padding: 30px;
    border: 1px solid #999;
    background: #f2f2f2;
}
</style>
<div class="example8">box-sizing: border-boxなし</div>

box-sizing: border-boxあり（width:50%）

<style>
.example9{
    /*コレ*/box-sizing: border-box;
    width: 50%;
    padding: 30px;
    border: 1px solid #999;
    background: #f2f2f2;
}
</style>
<div class="example9">box-sizing: border-boxあり</div>

【上記以外3】
min-width,max-widthが指定してあり、その範囲を超えているから

min-widthは幅の最小値、max-widthは幅の最大値を指定するCSSです。widthはこれらの範囲内で指定することができます。

widthがmin-widthとmax-widthの範囲を超えているとき、min-widthとmax-widthが優先されwidthが効いていないように見えます。

下記はwidth:500pxを指定していますが、max-width:150pxが指定されており、150pxを超えることができず、widthが150pxとなっています。

<style>
.example6{
    width: 500px;
    min-width: 50px;
    max-width: 150px;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example6">500px</div>

【解決】min-width,max-widthを直すか範囲内に指定する

解決方法は単純にmin-width,max-widthを直すかwidthをこれらの範囲内に指定することです。

レスポンシブ対応をするならmin-width,max-widthはpx指定、widthは%やvw指定などがオススメです。

<style>
.example7{
    width: 50%;
    min-width: 50px;
    max-width: 300px;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example7">50%</div>

【max-width,min-widthが効かないとき】IEだから

基本的にmax-width,min-widthはIEと特徴が似ています。

上記のwidthが効かない理由以外にmax-width,min-widthが効かない理由としてはIEブラウザ固有の問題です。

IEにおいて、flexやtable内の要素はmax-width,min-widthが無視されます。

【解決】widthを指定する

残念ながらこれといった解決方法はありません。

とりあえず「max-width:100%」のように最大幅を超えてほしくないときはもう「width:100%」を個別に指定するしかありません。

【それでも効かないとき】
ケアレスミスがないか確認

上記のいずれにも当てはまらないとき、CSSの単純なケアレスミスなどが考えられます。

pxや%の単位をつけていない、スペルミスがないかなどチェックです。

下記記事を参考にミスがないか確認しましょう。

calcを使っている場合は下記もチェックしてください。

まとめ

table,tdのwidthが効かないとき

①固定化されていないから

【解決】table-layout: fixedを指定する

②widthの合計が合っていないから

【解決】再計算かwidthを指定しないtdを用意する

a,spanのwidthが効かないとき

インライン要素にwidthは指定できないから

【解決】再計算かwidthを指定しないtdを用意する

flexのwidthが効かないとき

widthの合計が合っていないから

【解決】再計算か改行する

liのwidthが効かないとき

display:flexになっていないか確認

上記以外

①displayの値が違うから

【解決】inline-blockかblockを指定

②paddingやborderはwidthに含まれないから

【解決】box-sizing:border-boxで全体の幅をwidthとして指定できる

③min-width,max-widthが指定してあり、その範囲を超えているから

【解決】min-width,max-widthを直すか範囲内に指定する

以上、CSS widthが効かない原因と解決方法でした。