如何为桌子创建CSS布局将与移动，平板电脑和桌面一起使用

Question

i有一个具有3行和4列的表。我想使图像调整大小以适合移动，平板电脑和桌面的屏幕尺寸。因此，我希望所有12个图像一次显示在屏幕上。我需要做什么CSS？

<table>
<tr>
<td><img src=""></td>
<td><img src=""></td>
<td><img src=""></td>
</tr>
<tr>
<td><img src=""></td>
<td><img src=""></td>
<td><img src=""></td>
</tr>
<tr>
<td><img src=""></td>
<td><img src=""></td>
<td><img src=""></td>
</tr>
<tr>
<td><img src=""></td>
<td><img src=""></td>
<td><img src=""></td>
</tr>
</table>

Answer 1

尝试此代码，也可以使用row和col。但是我已经使用了CSS的media query，因为您可以调整尺寸并使其响应

@media only screen and (max-width: 776px) {
            img {
               height: 150px;
               width: 150px;
        }
    }

<table>
    <tr>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
    </tr>
    <tr>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
    </tr>
    <tr>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
    </tr>
    <tr>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
        <td><img src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg"></td>
</tr>
</table>