テーブルにはめた画像が伸縮する

前提・実現したいこと

レイアウトのテストをして勉強しています。レストランのメニューによくみかける、

　[画像]　コメント
[画像]　コメント
[画像]　コメント
[画像]　コメント

といった感じの表示をさせたいです。

<table>を使えばよいかと思ってつかってみたのですが、セルにはめ込んだ画像が意図しない形で伸縮してしまいます。また、元画像は大きいので、30%縮小で表示させたいです。

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

エラーは特に起こっていません。

該当のソースコード

html
1        <table>
2             
3        <tr><th class="fixed"><img src="calbo-cookpad.jpg" class="calbo"></th>
4        <td>
5            コメント
6            <a href="calbo.html" class="calbo">カルボナーラのレシピ</a>
7            
8        </td>
9        </tr>
10        
11        <tr><th class="fixed"><img src="calbo-cookpad.jpg" class="pepe"></th>
12        <td>
13            コメント
14            <a href="pepe.html" class="pepe">ペペロンチーノのレシピ</a>
15        </td>
16        
17        </tr>
18        </table>

CSS
1.fixed {
2  width : 300px;
3}
4
5.calbo img{
6  width: 30%;
7  height:auto;
8}

試したこと

テーブルのセルの横幅を固定したらいいのかなと思い、fixedクラスで300px指定してみましたがセルに影響してくれず、大きく伸縮した画像にセルがあわさってしまい、テーブルの形自体、意図したものでない形になってしまいました。

CSSで.calbo imgで、横幅を元画像の30%にし、高さはその縮小率にあわせるためにautoにしてみましたが、表示をしてみると横幅は10%程度（目算）、高さは縮小されず拡大されて、画像全体はかなり歪んでいます。

カルボナーラの表示で試してみています。クラスpepeがソースに記述されていますが、まだそちらは手を付けていません。

初心者のため、かなり見当違いなことをやっているかと思いますため、ご教授いただけたらと思います。
どうぞよろしくお願いいたします。

m.ts10806

2021/07/16 07:15

そもそも.calbo配下にimgが存在してないですが、そこはお気づきですか？

oshko03

2021/07/16 07:26

ありがとうございます。.calboのimgとは下記の行にあるimgの記載と思っていたのですが、違っていますか？ <tr><th class="fixed"><img src="calbo-cookpad.jpg" class="calbo"></th>

m.ts10806

2021/07/16 07:34 編集

.calbo img は「.calboクラスが指定されている要素内にあるimg」です。提示された状態は「imgに.calboクラスが指定されている」です。 HTML変更しないならCSSを下記に変更 img.calbo CSS変更しないならHTMLを下記に変更 <th class="fixed calbo"><img src="calbo-cookpad.jpg"></th>

oshko03

2021/07/16 07:55

ご教授ありがとうございます。意図しない伸縮がとまって期待した表示になりました。 :)

m.ts10806

2021/07/16 07:59

cssの影響範囲含めておさえておいてください。質問「受付中」のままになってるので、どういう風に解決したか自身で投稿して解決済みとしておいてください。

oshko03

2021/07/16 08:07

ありがとうございました！