固定レイアウト表（table-layout:fixed;）で列の幅を%単位の値で指定する場合、指定値の合計が100%を超える場合でも、表全体の幅は表要素のwidthプロパティの値が適用されてしまう。
例示
<table border="2" style="table-layout:fixed; width:200px;">
<tr>
<td style="width:200px;">200px</td>
<td style="width:100px;">100px</td>
</tr>
</table>
<table border="2" style="table-layout:fixed; width:200px;">
<tr>
<td style="width:100%;">100%</td>
<td style="width:50%;">50%</td>
</tr>
</table>| 200px | 100px |
| 100% | 50% |
どちらの表も1列目の幅が200px、2列目の幅が100pxになるはずです。
スクリーンショット
【固定レイアウト表で%値指定の列幅が100%を超えられない】のスクリーンショットと同様の状態になるそうです。
報告書き込み
【Mozilla】と【Safari】
列幅が%指定された固定レイアウトの表で、列幅合計が
100%を超える場合に、列が指定幅にならない。
table {
width: 300px;
table-layout: fixed;
}
td {
background: red;
}
<table>
<col style="width: 420px"><col style="width: 180px">
<tr><td>x</td><td>y</td></tr>
</table>
<table>
<col style="width: 140%"><col style="width: 60%">
<tr><td>x</td><td>y</td></tr>
</table>
<table>
<col style="width: 70%"><col style="width: 30%">
<tr><td>x</td><td>y</td></tr>
</table>
CSS仕様書には、固定レイアウトの表では、表の幅は、
列幅合計と表のwidth指定のうち大きい方を採用すると
あります。
>>36 のソースでは、<table>のwidthは300pxだから、
1つ目2つ目の表は同じ列幅を表しています。そして、
列幅合計が共に300pxを超えるので、結果両方とも
600pxほどの幅の表になるべきですよね。
ところが、MozillaとSafariは、1つ目の表は正しく表示
しますが、2つ目の表は3つ目と同じ表示になります。
つまり、140%, 60% と指定すると、これを合計100%
に変換して 70%, 30% の幅で表示してしまうようです。
しかし、この動作は仕様書には合わないと思います。
なお、自動レイアウトの場合は、最終的にアルゴリズムは
自由とあるので、この動作でも仕様書に違反するとは言え
ないと思います。
