0

Trying to make a table with 3 horizontal images responsive by adding 100% to the table and then 100% to the images so they re-size according to screen, they previously had image sizes which were set to fit in 960px.

However, the first image is taller than the second - then the third image is smaller than the third.

How can I get these to fit equally and respond to the screen size using this table?

<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
    <tr>
        <td><a href="http://www.example.com/myfirstitem">  <src="http://www.example.com/image/data/Home Page /myfirstitem.jpg"   style="border-style:solid; border-width:10px; width: 100%;"></a></td>
        <td><a href="http://www.example.com/myseconditem"><src="http://www.example.com/image/data/Home Page /myseconditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></a></td>
        <td><a href="http://www.example.com/mythirditem"><src="http://www.example.com/image/data/Home Page /mythirditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></a></td>
    </tr>
</tbody>
</table>
j08691
  • 204,283
  • 31
  • 260
  • 272
Molder
  • 121
  • 8
  • Is there a requirement to use a `table`? Take a look at [floating divs](http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css). – Jacob Nov 20 '15 at 11:16

1 Answers1

0

Divs would be much easier to use instead of tables, as there is much more pre-defined styling in tables that can mess up responsiveness.

div {
  padding: 0;
  margin: 0 auto;
}
img {
  width: 100%;
  margin: 0 auto;
}
<div>
  <img src="http://placehold.it/350x150" />
</div>

<div>
  <img src="http://placehold.it/350x150" />
</div>

<div>
  <img src="http://placehold.it/350x150" />
</div>
uxkidd
  • 69
  • 8