【HTML】テーブルの幅を変更しようとしても、変更されない

Question

お世話になっております。

HTMLの学習をしております。

テーブルを<tr>タグで作成し、列幅をCSSで調整しようとしましたが、幅が広がりませんでした。

CSSの読み込みができていることは確認ができているので、文法上の間違いだと考えておりますが、数時間原因調査をしてもわかりませんでした。

どなたか、原因・解決策をご教示願えませんでしょうか。
※例では、CSSのwidthプロパティの値を極端な値をあえて設定しています。
※横スクロールしてでも、列幅を固定したいと考えております。

<link rel="stylesheet" href="~/css/test.css">



<table border="1">
    <tr>
        <th class="test">test1</th>
        <th class="test">test2</th>
        <th class="test">test3</th>
        <th class="test">test4</th>
        <th class="test">test5</th>
        <th class="test">test6</th>
        <th class="test">test7</th>
        <th class="test">test8</th>
        <th class="test">test9</th>
        <th class="test">test10</th>

    </tr>
</table>

.test {
    table-layout:fixed;
    width:1000000px;
   background-color:yellow;
}

Answer 1

table-layoutプロパティはtable要素に付けるんじゃないですかね。
それはともかく
今はsurface_0さんのおっしゃるように親要素のtableの幅に収まるよう調整されているので、test10までのセルが画面いっぱいになっているのではないでしょうか。
10個のセルを合わせても画面幅より小さくなるようなwidthを指定すれば、設定が効いているのがわかると思います。
また、試しにtable { width: 200%; }のように設定すれば、親要素が大きくなって画面からはみ出て横スクロールバーが出るようになると思います。

Comments

[kazu0630]

ご回答いただき、ありがとうございます。

ご回答いただいた内容で、すべてが解決致しました。

「親要素」のtable幅に収まるように調整されるというところがポイントでした。

Answer 2

文法は間違っていませんのでご安心を。

一応width自体は効いています。
但しth要素はdisplay: table-cellが適用されるので、
widthを指定しても親要素のtableの幅に収まるように調整されます。

試しに要素を減らして幅を調整してみると変動するのが確認できると思います。

Comments

[surface_0]

itagagakiさんがおっしゃっている
> table-layoutプロパティはtable要素に付けるんじゃないですかね。
というのは確かにそうです。
見落としていました。失礼しました。

[kazu0630]

ご回答いただき、ありがとうございます。
教えていただいたことで、うまく行かない理由が分かりました。

「table-layout:fixed;」とwidthを指定すれば、幅を指定できるかという記事をいくらか見ていたのですが、「table-layout:fixed;」を指定しても、「display: table-cell」の設定の方が有効になるんですかね・・？

追加の質問になって申し訳ありませんが、横スクロールしてでも、列幅を固定して表示させたい場合、どのようにすれば良いでしょうか。
displayプロパティをいじればうまくいきそうだと思い、いろいろと試してみましたが、うまくいきませんでした・・。

[kazu0630]

surface_0さんとitagagakiさんのご回答頂いた内容で、解決致しました。

初歩的なことにも関わらず、ご回答いただき、ありがとうございました。

[surface_0]

> 追加の質問になって申し訳ありませんが、横スクロールしてでも、列幅を固定して表示させたい場合、どのようにすれば良いでしょうか。

以下のようにthの内側に幅を固定できる要素を入れてやれば強引に幅を確保することができます。

<th class="test"><div class="th-inner">test1</div></th>

.th-inner {
width: 500px;
}

[kazu0630]

ご回答いただき、ありがとうございます。

参考にさせていただき、理解を深めます。