Image Size in IE6 in Percent of Parent Element
Question
I need IE6 support. My client is still using this "very good" browser. So, I need to make responsive table with images.
My table has 12 images. Its width is set to 100% and its td elements have a width of 8.33% . Images' width is 100% . In all normal browsers it works good. Images are bigger or smaller in different screens. But in IE6-IE9 images' width is their real width. And table is too wide. I see the horizontal scroll in my page and its very lamentable:
td.footer table td {
width: 8.333333333333333%;
padding: 1px;
}
.footer table td img {
width: 100%;
}
<table>
<tr>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/1.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m1.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/2.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m2.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/3.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m3.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/4.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m4.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/5.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m5.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/6.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m6.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/7.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m7.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/8.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m8.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/9.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m9.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/10.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m10.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/11.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m11.jpg"></a></td>
<td class="banner_t"><a href="<?php bloginfo('template_url') ?>/img/12.jpg" rel="lightbox['q']"><img class="banner" src="<?php bloginfo('template_url') ?>/img/m12.jpg"></a></td>
</tr>
</table>
1 answers
solution1
3 ACCPTED 2014-12-16 06:54:07
I'm not sure what you mean by a responsive table , but it appears as though you want a table that is always 100% the width of the viewport, and images/links that are 100% the width of their parent table cell. If that's the case, you really don't need much more than a fixed table layout:
<!DOCTYPE html>
<html>
<head>
<title>Glorious IE6</title>
<style type="text/css">/* styles below */</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><a href="#"><img src="image.png" /></a></td>
<td><a href="#"><img src="image.png" /></a></td>
<td><a href="#"><img src="image.png" /></a></td>
<td><a href="#"><img src="image.png" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
The styles are pretty basic. First we change the table-layout to that of fixed . This appears to be the main ingredient in the solution. You can read more about the fixed option here . Essentially, it sets the width of each cell as a fraction of the total width of the table. Additional instructions include reducing padding and borders, as well as making nested links and images size themselves according to their parents width:
table {
table-layout: fixed;
border-collapse: collapse;
}
table, td {
padding: 0;
}
a, img {
width: 100%;
border: none;
display: block;
}
The end-result appears to be the effect you're attempting to achieve:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.