調整大小<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>