テーブル内のイメージを必要なスペースだけに取る

Question

以下に示すようなHTMLテーブルを作成すると、イメージは必要以上のスペースを占有します。それを防ぐ方法はありますか？

td { 
 
    border: 1px solid black; 
 
}

<table style="border-collapse: collapse"> 
 
    <tr> 
 
    <td>Test</td> 
 
    <td><img src="https://picsum.photos/1499/1000" width="10%"></td> 
 
    <td>Text</td> 
 
    </tr> 
 
</table>

Answer 1

あなたのCSSでimgタグにdisplay: block;を追加

td { 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    display: block; 
 
}

<table style="border-collapse: collapse"> 
 
    <tr> 
 
    <td>Test</td> 
 
    <td><img src="https://picsum.photos/1499/1000" width="10%"></td> 
 
    <td>Text</td> 
 
    </tr> 
 
</table>

Answer 2

あなたが中央の幅を意味する場合は、「 "TD" の幅を適用td "と適用する

img { 
    max-width: 100% 
} 

は、我々は我々が望む結果を得ます

.td-class { 
    width: 100px; 
} 

のように "TD" に、幅を10％または100pxに適用されているとしましょう。