我如何創建一個表格，其圖像可以調整以適合 <td> 框？

Question

我正在為一個朋友開發一個spa網站的移動版本，並且能夠使圖像正確地適合屏幕大小，但是我希望圖像能夠利用的每個表格單元格中始終留有空間而不是浪費空間。 這是我正在使用的相關HTML / CSS：

<table class="wide">
<tr>
<td><img class="service-4-pics" src="pic.jpg"/></td>
<td><img class="service-4-pics" src="pic.jpg"/></td>
<td><img class="service-4-pics" src="pic.jpg"/></td>
</tr>
</table>

table.wide {
width: 100%;
margin: auto;
display: block;}

img.service-4-pics {
margin: auto;
width: 100%;
height: auto;
display: block;}

Answer 1

您還應該設置<td>單元格的寬度：

CSS：

table.wide td {
    width: 33%;
}

或者，HTML：

<table class="wide">
<tr>
<td width="33%"><img class="service-4-pics" src="pic.jpg"/></td>
<td width="34%"><img class="service-4-pics" src="pic.jpg"/></td>
<td width="33%"><img class="service-4-pics" src="pic.jpg"/></td>
</tr>
</table>