tableが複数ある場合、各table内のセル幅を同一にしたい

Question

＊やりたいこと
table内のセル幅をどのテーブルであっても同一にしたい
例のコードのように複数のテーブルがある場合、
セル中の文字列の長さにかかわりなく、どのテーブルであっても、３つののセルの長さ（横幅）を同一の幅にしたい。

＊やってみたこと

<style>
.width100{
  width:100px;
}
.width150{
  width:150px;
}
.tb-fix{
  table-layout:fixed;
}
.td-fix{
   word-wrap:break-word;
 }
</style>
最初のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix ">
  あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
  </td>
  <td>
　なにか大量の文字列・・・・・
  </td>
  <td class="td-fix">
  アイウエオカキクケコサシスセソ
  </td>
</tr>
</table>
二番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
　日本語モジレツ
  </td>
  <td class="td-fix">
  アイ 
  </td>
</tr>
</table>
三番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
　長い英文・・・・・
  </td>
  <td class="td-fix">
  短い英文
  </td>
</tr>
</table>

ただし、真ん中のセルには、日本語のかなり長い文字列が入る前提ですが、まれに英文の場合もあります。したがって、真ん中のセル幅によって、左のセルの幅が変わってくるのが現状です。
英文であっても、日本語（全角文字）であっても、関係なく、各テーブルのセル幅を同じにしたいです。

左のセルの中の文字列が短い場合は、左のセル幅が狭くなってしまうという問題も発生しています。

どうしたら、どのテーブルも、セル幅を同一にすることができるでしょうか？

Comments

[kei344]

https://teratail.com/questions/125721 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、この質問を削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input

[sakura-shi]

類似ではありますが、先の質問は投降後編集し質問自体を変更しています。ですので改めて投稿しました。一番大事なことは、なによりも未解決です。

[sakura-shi]

最大の問題は未解決ということです。

[kei344]

同じ要件についての質問を複数されると回答が付きにくくなるので、お勧めしません。 https://teratail.com/help#posted-otherservice

[m.ts10806]

前の質問の回答にある「widthタグかスタイルどちらかにしましょう」というところを未反映のまま次の類似質問をたててしまう質問者さんにも問題はあると思いますが。サポートセンターではないので自分が欲しいタイミングで100％の回答が望めるとは限りません。質問内容・自身の理解度に問題がなかったか、不明点はなかったか　その辺りも含めて考え直された方が良いです（回答も得やすくなります）

[Lhankor_Mhy]

このコードは width100 などのクラスを付け忘れているのでしょうか？　それとも何かの理由で外しているのですか？

[sakura-shi]

col style="width:15%;"設けたことが理由で、width:100px;等は外しました。

[Lhankor_Mhy]

ということは、col要素のCSSで width が聞かないのは何故か？　というのがご質問ということでいいですか？　幅を固定にする方法は解決しているのですね？

[m.ts10806]

最初とコードが変わりすぎていて結局何がしたいのかわからなくなってますね。回答が余計につきにくい状況になってますよ。回答者を振り回すだけになるので、まずはきちんと前の質問を解決してから、それを以て次に移ってはと。

[sakura-shi]

幅を固定にする方法は解決していません。私が試してみたことを質問のコードに反映しただけです。
質問をこれから修正しますが、セル幅を固定にというのは、どのテーブルであっても同じセル幅にしたい、という意味です。説明不足ですみません。

[Lhankor_Mhy]

ああ、前の質問に回答したほうがよかったのですね。大変失礼いたしました。

[Lhankor_Mhy]

というか、全く同じ回答ですね。申し訳ない……　逆に、不明な点はどこなんでしょう？

[sakura-shi]

テーブルによって、セル幅がバラバラになってしまうことが問題です。今不明点は、セル幅を％指定してみたのですが、各テーブルのセル幅は同一にならないので、どうしたらよいか？ということです。

[Lhankor_Mhy]

当方の環境では、私の回答のコードを追加した後に『各テーブルのセル幅は同一にならない』という現象は起きませんでした。環境の問題か、ここに書かれていない部分のコードに問題があるのかもしれません。

Answer 1

補足コメントを読む限り、ご提示のコードに最小限のコードを追加して、幅固定を実現せよ、というご質問と理解しました。
以下を追加してください。

table{
  width: 100%;
}