How To Make Two Columns In Html Responsiveness?
Solution 1:
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%;
}
}
<tablewidth="100%"cellspacing="0"cellpadding="0"border="0"style="background-color: #f3f3f3;"><tr><tdstyle="text-align: center; vertical-align: top;"><!-- HEADER --><tablealign="center"cellspacing="0"cellpadding="0"border="0"style="background-color: #ffffff; "class="header"><tr><!-- Logo --><tdalign="left"style="display: inline-block; padding: 5px;"class="logo"><ahref="#"><imgwidth="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 --><tdalign="right"style="display: inline-block; padding: 5px;"class="logo"><ahref="#"><imgwidth="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 :)
Solution 2:
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.
Solution 3:
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>
Post a Comment for "How To Make Two Columns In Html Responsiveness?"