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

Question

I have this table:

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

Every image has a different size and is huge.

Right now, I see them like this:

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

                       ...and so on...

I want to fit the width of table into view.

I want to set the width of every <td> to 25% and and every <tr> to 50%. As result, to see 8 images in view.

The table has more <tr> , but I want to can complete see 2 <tr> at once.

Answer 1

For the width you can set table to width 100% and td width 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>