colgroupでTDの幅を指定

Question

前提・実現したいこと

CSSについて
テーブル内の任意のTDの幅を指定したかったのですが、直接、widthを入れてもならないので、いといろ調べて<colgroup>をつかってみました
最初はうまくできなかったのですが、いろいろしているうちになりました。
どうしてなったのか理解できずにいます。

ネットで調べたのですがよくわかりませんでした

今後も使いたいと思っているのでしっかり理解したいと思っております

よろしくお願いします

発生している問題・エラーメッセージ

エラーではありません

該当のソースコード

<table width="98%" border="1" style="word-wrap:break-word; table-layout:fixed;">
  <colgroup>
    <col width="42%">
    <col width="8%">
    <col width="8%">
    <col width="42%">
  </colgroup>
  <tr>
    <td colspan="4">
       <table width="100%" border="1">
      <tr>
        <td width="5%" bgcolor="#663300"><span style="color:#fff;">配列</span></td>
        <td rowspan="2" bgcolor="#FFFFCC">項目</td>
        <td rowspan="2" bgcolor="#FFFFCC">品質</td>
        <td rowspan="2" bgcolor="#FFFFCC">環境</td>
        <td rowspan="2" bgcolor="#FFFFCC">安全</td>
        <td rowspan="2" bgcolor="#FFFFCC">情報</td>
        <td rowspan="2" bgcolor="#FFFFCC">他</td>
        <td colspan="3" bgcolor="#FFFFCC">規格区分</td>
        <td rowspan="2" bgcolor="#FFFFCC">規格要求事項</td>
        <td rowspan="2" bgcolor="#FFFFCC">摘要</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFCC">No.</td>
        <td bgcolor="#FFFFCC">区分</td>
        <td bgcolor="#FFFFCC">項番</td>
        <td bgcolor="#FFFFCC">項数</td>
      </tr>
      <tr>
        <td><?=$data["data01"]?></td>
        <td rowspan="2"><?=$data["data02"]?></td>
        <td rowspan="2"><?=$data["data03"]?></td>
        <td rowspan="2"><?=$data["data04"]?></td>
        <td rowspan="2"><?=$data["data05"]?></td>
        <td rowspan="2"><?=$data["data06"]?></td>
        <td rowspan="2"><?=$data["data07"]?></td>
        <td rowspan="2"><?=$data["data08"]?></td>
        <td rowspan="2"><?=$data["data09"]?></td>
        <td rowspan="2"><?=$data["data10"]?></td>
        <td rowspan="2"><?=$data["data11"]?></td>
        <td rowspan="2" style="text-align: left; vertical-align: top"><?=nl2br($data["data12"])?></td>
      </tr>
      <tr>
        <td bgcolor="#663300"><?=$data["data13"]?></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFFCC">フロー</td>
    <td bgcolor="#FFFFCC">手順書</td>
    <td bgcolor="#FFFFCC">記録</td>     ←ここのブロックがcolgroupの設定が反映されています。
    <td bgcolor="#FFFFCC">内容</td>
  </tr>
  <tr>
    <td rowspan="30">
       <?php if($data["img_01"]) { ?>
       <a href="<?=$data["img_01"]?>" target="_blank"><img style="max-width: 100%;" src="<?=$data["img_01"]?>"></a>
        <?php } ?>
    </td>
    <td><?=$data["data15"]?></td>
    <td><?=$data["data45"]?></td>
    <td rowspan="30" style="text-align: left; vertical-align: top"><?=nl2br($data["data14"])?></td>
  </tr>
  <tr>
    <td><?=$data["data16"]?></td>
    <td><?=$data["data46"]?></td>
  </tr>
  <tr>
    <td><?=$data["data17"]?></td>
    <td><?=$data["data47"]?></td>
  </tr>
  <tr>
    <td><?=$data["data18"]?></td>
    <td><?=$data["data48"]?></td>
  </tr>
  <tr>
    <td><?=$data["data19"]?></td>
    <td><?=$data["data49"]?></td>
  </tr>
  <tr>
    <td><?=$data["data20"]?></td>
    <td><?=$data["data50"]?></td>
  </tr>
  <tr>
    <td><?=$data["data21"]?></td>
    <td><?=$data["data51"]?></td>
  </tr>
</table>

試したこと

TDの幅をCSSで指定したり、タグに直接widthをいれたりしましたが幅がかわりませんでした

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown

[bunbun007]

この質問は別に投稿しておりますので無効とさせて頂きます

[m.ts10806]

回答がついている質問は直接削除依頼ができないのでもうひとつの方を削除依頼をだし、こちらの質問を編集してください

[m.ts10806]

と、こちらに回答を投稿されているx_xさんも仰っていますよ

Answer 1

col 要素の width 属性です。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#edef-COL
https://developer.mozilla.org/ja/docs/Web/HTML/Element/col

今後も使いたい

これに限らず table 関連の装飾回りの属性は HTML5 で一掃されているので、今後のことを考えるのであれば CSS で記述するようにしましょう。

  <tr>
   <td class="flow">フロー</td>
   <td class="manual">手順書</td>
   <td class="record">記録</td>
   <td class="contents">内容</td>
  </tr>