调整大小<tr>和<td>图像内按百分比

Question

我有这张桌子：

<table>
    <tr>
        <td><img src="..."/></td>
        <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>
        <td><img src="..."/></td>
    </tr>
    <tr>
        <td><img src="..."/></td>
        <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>
        <td><img src="..."/></td>
    </tr>
    ...
</table>

每个图像都有不同的大小，而且很大。

现在，我看到他们是这样的：

This is the view:
----------------------------------------
| This is the table:                   |
| -------------------------------------|------------------
| |             |             |        |     |           |
| |             |             |        |     |           |
| |             |             |        |     |           |
| |    img1     |     img2    |     img|3    |    img4   |
| |             |             |        |     |           |
| |             |             |        |     |           |
| |             |             |        |     |           |
| |             |             |        |     |           |
| |------------------------------------|-----------------|
| |             |             |        |     |           |
---------------------------------------      |           |
  |             |             |              |           |
  |             |             |              |           |
  |     img5    |     img6    |      img7    |    img8   |
  |             |             |              |           |
  |             |             |              |           |
  |             |             |              |           |
  --------------------------------------------------------

                       ...and so on...

我想使表格的宽度适合视图。

我想将每个<td>的width设置为 25%，并将每个<tr>的width设置为 50%。 结果，在视图中看到 8 个图像。

该表有更多<tr> ，但我想一次完成看到 2 个<tr> 。

Answer 1

对于宽度，您可以将表格设置为宽度 100% 和 td 宽度 25%； https://codepen.io/rohinikumar4073/pen/gOMrELb

 td { width: 25%; } table { width: 100%; table-layout: fixed; } td img { width: 100%; }

 <table> <tr> <td><img src="https://via.placeholder.com/450" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> </tr> <tr> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> </tr> <tr> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> </tr> <tr> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> <td><img src="https://via.placeholder.com/150" /></td> </tr> </table>