0

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:

enter image description here

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:

enter image description here

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>
Jamie
  • 363
  • 7
  • 19
  • 4
    don't use tables for layout, especially if you are changing the display style – Pete Jan 19 '18 at 10:05
  • 1
    are you seriously trying to make a responsive layout using tables? Tables are for data representation only. Have you ever heard about divs? – Lelio Faieta Jan 19 '18 at 10:08
  • [This](https://www.w3schools.com/howto/howto_css_two_columns.asp) might help you – Becks Jan 19 '18 at 10:10
  • 1
    you can use responsive frameworks like bootstrap or materialize. – Rupal Jan 19 '18 at 10:11
  • Ditch that table style and look into `flexbox` and `grid`. Or if you do not to learn new things just use `bootstrap` – Nicholas Jan 19 '18 at 10:15
  • Thank you all for your help. You are completely right. I just didn't think about that. I created everything in containers now instead of tables. – Jamie Jan 19 '18 at 17:43
  • As you can see I also added tag "html-email", because it should be an e-mail template. In the webpage it looks perfect, but after receiving it in my mailbox, all the positions are messed up. What do you advise? Still using
    or use in this case?
     – Jamie Jan 19 '18 at 17:57

3 Answers3

2

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

vaishali kapadia
  • 934
  • 11
  • 22
0

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.

dream88
  • 521
  • 2
  • 9
0

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>
Pedro Bauer
  • 19
  • 1
  • 6