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> <src="http://www.example.com/image/data/Home Page /myfirstitem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /myseconditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /mythirditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
</tr>
</tbody>
</table>
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>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
At the moment I have one <table> for the whole page, and one <table> for the header. In the header table there are two columns filled with two simple images. See below for the first result:
These columns are responsive, but what I would like to do is to make the header a maximum width of 640 pixels, and a minimum width of 640 pixels. Assume that the images are just an example, because the other images I want to use are smaller, and the fact is that there is no space between these images. I could add a padding, but the responsiveness doesn't work properly anymore.
And the second is when I make the window smaller, the image on the right side goes under the first image which is good (see below for the responsive result). But this needs to happen already when the screen size is below 640 pixels and not just when the window touches the image on the right side.
Responsive result:
What do I need to do to make the header a minimum and maximum of 640 pixels, and to make it possible the responsive starts when the window is below 640 pixels?
I use the following code:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use below media query to your CSS file. It will take your td to width 100% below 640 devices.
Note: I have mentioned two class in header table and logo td.
.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
#media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;
}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
See jsfiddle for responsive -
https://jsfiddle.net/vaishuk/qhqgrgnc/1/
Hope this helps :)
I think you are missing Media Query.
Setting the display to inline-block makes the div's align side by side to each other.
If you remove the inline-block on the td(s) :<td align="left" style="display: inline-block; padding: 5px;">.
inside the second table and add a media query after giving it a css class:
` #media (max-width:640px){
td.secondtable-cell{
display: block;
}
}`
This should work as expected. Note, you might need to add marigins/padding for space.
Please do not use tables. Tables are not viable to be responsive and people now a days use div to actually make such containers possible.
CSS:
#page{
width: 1280px;
}
#container1,#container2{
disply:inline-block;
width:49%;
}
HTML:
<div id="page">
<div id="container1">Container2</div>
<div id="container2">Container1</div>
</div>
I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
demo
html...
<div id="main">
<table>
<tr>
<td><img src="" width="200" height="100" /></td>
<td>
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
</td>
<td><img src="" width="100" height="100" /></td>
</tr>
<tr>
<td style="color: blue; background-color: yellow;">some text here</td>
<td colspan=2 style="color: white; background-color: blue;">next goes here</td>
</tr>
</table>
</div>
css...
img{
background-color: red;
display: block;
border: 2px solid white;
}
What I have tried :
#main table{
width: 200px;
display: table;
table-layout: fixed;
}
demo
What I want is here:
Original size:
When I re-size the main:
Use zoom property, for example :
#main table{
width: 300px;
display: table;
table-layout: fixed;
zoom: 0.4;
}
I have checked your code.
But the way you are trying to do this, is not possible because the parent table takes the cumulative width of all the <td>'s in the row with the highest no of <td>'s.
Hence your table takes the width of the first <tr>.
To reach your goal you can follow the following steps-
Each <tr> will contain only one <td>.
That <td> will contain another table. i.e. In the <td> of the first <tr> of the given table you should write the code of a table containing the 1st row of the current given table.
In the <td> of the 2nd <tr> of the given table you have to accomodate another table with 2 <td>s of the 2nd <tr> in your current table.
check the new demo or the following HTML code-
<div id="main">
<table>
<tr>
<td>
<table width=100% style="overflow-x:hidden">
<tr>
<td>
<img src="" width="200" height="100" />
</td>
<td>
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
<img src="" width="50" height="30" />
</td>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</tr>
<tr>
<td>
<table width=100%>
<tr>
<td style="color: blue; background-color: yellow;">some text here</td>
<td style="color: white; background-color: blue;">next goes here</td>
</tr>
</table>
</tr>
</table>
No change required for the CSS code.
The output will be as follows-
As already said, play with %s, here is an example.
<div id="main">
<table>
<tr>
<td><img src="" width="100%" height="100%" /></td>
<td>
<img src="" width="100%" height="30%" />
<img src="" width="100%" height="30%" />
<img src="" width="100%" height="30%" />
</td>
<td><img src="" width="100" height="100" /></td>
</tr>
</table>
</div>
http://jsfiddle.net/pUnsA/2/
#main table{
display: table;
table-layout: fixed;
}
remove the width :200px;
the image size is bigger than the with of TD hence it goes off the screen
Dont use tables for layout, use floated divs instead.
Use Jquery to work out Browser Height and Browser Width. (you will need to include "Jquery CQDN" script references in your tags
Set height and width on your containers either a percentage of the total screen height and width or a percentage of a container div (gets more complex then, but more versatile to intricate layouts)
Important! Dont set height and width in your CSS for any elements you are resizing with jquery! this will only confuse the hell out of things
however you can use Min-Width and Min-height values, to stop any containers shrinking past any limits/constraints you want to set on them
Doing it this way will negate the need to tweak the html for different browsers.
Works for me for professional results.
The Javascript: The bit in the document.ready block, will automatically resize your whole page when the user resizes thier browser window.
Here's a working solution!.. (just copy/paste it to try)
<html>
<head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<style>
html{float:left; padding:0px; margin:0px; background-color:red;}/* /w/h Handled by Javascript*/
body{float:left; padding:0px; margin:0px; background-color:orange; font-size:11px; font-family:Verdana; }/* /w/h Handled by Javascript*/
div.ContentContainer{float:left; margin:0px; padding:0px; background-color:yellow; } /* /w/h Handled by Javascript*/
div.SiteInfoContainer{float:left; padding:0px; margin:0px; background-color:green; color:White; }/* /w/h Handled by Javascript*/
div.SiteDetailContainer{float:left; padding:0px; margin:0px; background-color:blue; color:White; }/* /w/h Handled by Javascript*/
</style>
</head>
<body>
<div class="ContentContainer">
<div class="SiteInfoContainer">25% Wide, 100% high</div>
<div class="SiteDetailContainer">75% wide, 100% high</div>
</div>
<script type="text/javascript">
function MasterContentFullHeight() {
var TotalWinHeight = $(window).height();
var TotalWinWidth = $(window).width();
$("html").css('height', TotalWinHeight);
$("html").css('width', TotalWinWidth);
$("body").css('height', TotalWinHeight);
$("body").css('width', TotalWinWidth);
$(".ContentContainer").css('height', TotalWinHeight);
$(".ContentContainer").css('width', TotalWinWidth);
$(".SiteInfoContainer").css('width', ((TotalWinWidth/ 100) * 25));
$(".SiteInfoContainer").css('height', TotalWinHeight);
$(".SiteDetailContainer").css('width', ((TotalWinWidth / 100) * 75));
$(".SiteDetailContainer").css('height', TotalWinHeight);
}
$(document).ready(function() {
MasterContentFullHeight();
$(window).bind('resize', MasterContentFullHeight);
});
</script>
</body>
</html>
You could use a wrapping element with percent-based padding to set the aspect ratio you want and then position the images with %-based width / height inside of that wrapper. You could then decide if you wanted a percent based gutter size, or fixed gutter size. I coded it up with a fixed gutter and negative margins on the parent to negate that gutter, using box-sizing to easily split it into a grid, but you could simplify it and achieve the same result by being more precise with your left / top positions and widths to account for gutters. You could also replace the ID attributes for the images with :nth-child selectors if you know your target browsers have the capability.
I have included a JS Fiddle that shows a working example as well here: http://jsfiddle.net/xbafy/
HTML:
<div id="image_grid">
<img src="" id="i1" />
<img src="" id="i2" />
<img src="" id="i3" />
<img src="" id="i4" />
<img src="" id="i5" />
</div>
CSS:
#image_grid {
position: relative;
height: 1px; /* To prevent IE from not adding margins to 0px height elements */
padding-top: 40%; /* Whatever % you want to use to set the aspect ratio properly */
margin: -10px; /* Used to negate our border added below so that images run to edges */
}
#image_grid img {
position: absolute;
border: 10px solid #fff; /* Used to create a hard non-flexible gutter between images, use padding if youd rather, and use % if you still want it flexible based on size */
box-sizing: border-box;
}
#i1 {
top: 0;
left: 0;
width: 50%;
height: 100%;
}
#i2, #i3, #i4 {
left: 50%;
width: 20%;
height: 33.33%;
}
#i2 { top: 0; }
#i3 { top: 33.33%; }
#i4 { top: 66.66%; }
#i5 {
top: 0;
left: 70%;
width: 30%;
height: 100%;
}
You could try using media queries in CSS. It also looks like you're using tables to lay your page out. I would highly recommend you don't do this, for several reasons:
1) It's been bad practice for over a decade and will make your site seem unprofessional to anyone who looks at the code.
2) It's inflexible. The layout of your site cannot be easily altered/rearranged this way whereas if you build in divs and use CSS for your layouts it will be very easy to update in the future.
3) Whilst it may not seem it at first, using divs and CSS IS actually an easier way of doing it. You'll end up writing a lot less code this way. Remember one content block the correct way is just a single element ( but the tables way requires at LEAST 3 () and that's if you ignore the 'tbody' tag, which you shouldn't do really.
please find updated fiddle "http://jsfiddle.net/XUeAV/"
<table width="100%">
<tbody><tr>
<td width="55%" height=""><img width="" height="100" style="" src=""></td>
if you want to make it responsive as width of #main changes then you need to define width of table in %
I have a table with two columns. I want to center the right-most column with the page so the left column would hang off to the left.
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
I'm assuming the solution will be CSS.
You are right - CSS is the way to go. Give the column an id or class that you can target and and in your CSS center it. Assuming your table width is where you want it, give it a width of your table subtracting the other column that is to the left.
Something like this:
HTML:
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td class="center"><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
CSS:
td.center {
text-align: center;
width: 860px;
}
Edit: Based on the comments below, here is a sample layout just using div's instead of a table
http://jsfiddle.net/willyrybone/8eR6G/
HTML:
<div id="page-wrap">
<div id="sidebar">
<p>this is some</p>
<p>sidebar content</p>
</div>
<div id="main-content">
<p>This is some</p>
<p>centered main content</p>
</div>
<div>
CSS:
#page-wrap {
width: 960px;
margin: auto;
}
#sidebar {
float:left;
width: 100px;
background: #eee;
}
#main-content {
text-align:center;
background:#bbb;
}
You'll have to wrap your table in a div, and center that:
<div style="width:1060px; margin: auto">
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100">COLUMN TO HANG TO LEFT</td>
<td style="background: #ccc">COLUMN TO BE CENTER WITH PAGE</td>
</tr>
</table>
</div>
http://jsfiddle.net/9HgpM/embedded/result/
How to make the div height to 100% so that if i change the div color the whole td color should be changed
<table style="table-layout:fixed;width:100%;" border="1" cellpadding=0 cellspacing=0>
<tr>
<td width="20%" height="70px" align="center">
<div class="step step1" style="display:block;" step="1">
Video<p align="center"> <img id="img1" src="/media/img/accept.png" /><img id="img2" src="/media/img/close.gif" /></p>
</div>
</tr>
</table>
You just need height: 100%; in your styling, like this:
<div class="step step1" style="display:block; height: 100%;" step="1">
You can test it out here. However, you're missing a </td> which will give odd behavior in certain DOCTYPEs (it is valid in some), make sure to close that table cell to be safe. One other note, unless you have it overridden somewhere, there's no need for the display: block;, that's the default display for a <div> element.
Why don't you change the td's color?
div's style:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
Why don't you set the td color then?
<td width="20%" height="70px" align="center" style="background-color:Orange;">
<td style="height: 100%"><div style="height: 100%"></div></td> to be explicit, but by default it should be the whole height and width of the td provided the td and table have a height.