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%;
}

OR，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>

如何创建一个表格，其图像可以调整以适应盒子的大小？

1 个答案: