テーブルタグのセルの幅の一部だけを指定

こんにちは、画像のようなテーブルを親要素の98％で表示させています。
表示自体は問題なくできているのですがB～Iの各セルの横幅を小さくしたくて

<td width="2px">B2</td>
もしくは
<td width="3%">B2</td>

などとやってみたのですが、何も変わらないようです。
やって居る事は適切でしょうか？

もしくは、こういう場合どこに何を与えれば良いでしょうか？
詳しいかた、よろしくお願いいたします。

■HTML
<table align="center">
<tr>
<td class="bg_black">A1</td>
<td colspan="8">B1</td>
<td colspan="7">J1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C２</td>
<td>D2</td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
<td>I2</td>
<td>J2</td>
<td>K2</td>
<td>L2</td>
<td>M2</td>
<td>N2</td>
<td>O2</td>
<td>P2</td>
</tr>

■CSS
table tr td
{
font-size : 1em ;
color : #ffffff ;
text-align : center ;
background : #444444 ;
}

table
{
margin-top : 10px ;
margin-bottom : 10px ;
width: 98%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/03/12 13:16

こんにちは

＞などとやってみたのですが、何も変わらないようです。
＞やって居る事は適切でしょうか？
fixedレイアウトにしているので、後から調節するような指定は無視されます。
fixedを外せば、ご質問の指定でも反映されると思います。


現状のままで実現したいのなら・・
（1）「B1」と表示されているセルの幅を指定する
　<td colspan="8" style="width:20%;">B1</td>

あるいは、
（2）個々のセル幅を指定するならcolgroup等を設定しておいて指定する
　<colgroup>
　<col class="colGroup1">
　<col span="8" class="colGroup2">
　<col span="7" class="colGroup3">
　</colgroup>

などとした上で、CSSに以下を追加。
　.colGroup2 { width:20px; }

などが、すぐに思いつく方法でしょうか・・

この回答へのお礼

最初のセルにまとめて設定すれば良い感じなんですね、勉強になりました。
おかげさまで出来ました、ありがとうございます。

お礼日時：2023/03/12 16:10