So i am using aside html5 semantic to make columns.
I wanna have them on the left and right
So i just use class to use float:right to have them in opposite of each other.
but for some odd reason i cannot understnd, its not working in the last one.???
p.s I am new to html or coding in general. don't mind the aesthetics of the codes.
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>
Replace your :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
with this one :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
clear:right;
}
PS:
- I added the clear: right; line
- After each float:right, you have to reset the floating element, by using clear: right, so the next element which positioned below will be drawn from the left, just the same as the above elements
Try like this: Demo
Use this
aside.left{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure should be like this:
<aside class="left">...</aside>
instead of
aside{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure:
<aside>...</aside>
you can shift left and right aside block with this css,
Please use this css-
aside.right { clear: both; }
aside { float: left; }
Remove margin-bottom:15px from aside tag
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
/*margin-top: 15px; */
margin-bottom: 15px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>
Related
I am creating this email html template the html works responsively in google console and gmail mobile app, but gets distorted in mobile chrome gmail version.
This image is the mobile responsiveness when i open in console in crome desktop
this is email responsivness when i open in browser desktop
this is image responsiveness when i open in mobile browser
note this email template works fine in the gmail mobile app
<!DOCTYPE html>
<html lang="en">
<head>
<title>pixels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Objektiv+Mk1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.c500&display=swap" rel="stylesheet">
<style>
#font-face {
font-family: objektiv mk1;
src: url(fonts.ttf);
}
* {
font-family: objektiv mk1;
}
</style>
</head>
<body style="margin:0; padding:0;">
<div style="width:600px; margin:auto; overflow:hidden; border: 1px solid #E5E5E5; background-image: url(https://i.postimg.cc/Y00Zyjrj/xxx.png); background-repeat: no-repeat; background-position: 0px 91px; ">
<table width="600px" cellspacing="0" cellpadding="0" style="position: relative; border: none; ">
<tbody>
<td style="padding: 20px;">
<table width="100%">
<tr style="text-align: center; width: 100%;">
<td style="text-align: center;">
<div>
<img src="https://i.postimg.cc/fyVqfFC9/xxx-xxx-logo-green-410x.png"
style="max-width: 150px;">
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 25px 0px 0px 0px; border-top: 2px solid #f4f4f4;">
<div>
<img src="https://i.postimg.cc/X7p6s1qx/xxx-you.png" style="max-width: 350px;">
</div>
</td>
</tr>
</table>
</div>
<tr>
<td style="background: #fff; font-size: 28px; text-align: center; padding: 20px 84px 30px;">for
ordering with us and taking the first step towards better health and wellness 😊</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
<table style="width: 100%; padding: 40px; overflow: hidden;">
<tbody>
<tr>
<td style=" background: #fff; overflow: hidden; border-radius: 5px;">
<div><img src="https://i.postimg.cc/3wHMJKBb/process.png" style="margin: auto;"></div>
</td>
</tr>
<tr>
<td style="padding: 10px 0px;">
<p style="text-align:center;font-size: 18px; font-weight: 600;">Your order will
be dispatched within 48 hours. </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 26px 26px 0px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="background-color: #EEFDEB;">
<thead style="background-color: #EEFDEB; margin-bottom: 10px;">
<tr>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Product
</td>
<td style="width:24%; padding: 10px"> </td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Qty</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Price</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Subtotal
</td>
</tr>
</thead>
<tbody style="background-color: #E5E5E5;">
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr>
<td style="width:20%;">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png"
style="max-width:100%;">
</div>
</td>
<td style="width:24%; font-size: 16px;">ACV <span
style="display: block;">Effervescent</span< /td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="padding: 26px; background-image: url(https://i.postimg.cc/RZfQd50z/1-Transactional-xxx-Order-xxx-svg-1.png); background-repeat: no-repeat; background-position: 100% 350px; width: 100%;">
<table width="100%;">
<tr>
<td style="">
<div
style="padding:0px 26px; background: radial-gradient(80.68% 88.46% at 50% 50%, #69DE7A 0%, #A9EF82 100%) #EEFDEB; border: 1.5px solid #000000; border-radius: 6px;">
<p style="text-align:center; font-size: 24px; font-weight: 700;">Your cashback
of {#var#} will be credited to your wallet upon delivery!</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td>
<div>
<p style="font-weight: 600;">Shipping to:</p>
<p style="margin:0;">{name}</p>
<p style="margin:0;">{address line 1}</p>
<p style="margin:0;">{address line 2}</p>
<p style="margin:0;">{address line 3}</p>
<p style="margin:0;">Tel. {phone number}</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td style="padding: 30px 75px 35px; font-size: 21px; text-align: center;">Check out our
<strong>other best-sellers</strong> based on your purchase!
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Apple Cider Vinegar Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/BZzVnSZc/xxx.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Ashwa Calm</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%; padding: 0px 20px;">
<div>
<img src="https://i.postimg.cc/pr3GGZc1/xxx.png"
style="max-width: 75px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Glutathione Skin Glow
Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 25px;">
<table width="100%" style="border-radius: 5px; border: 1px solid #000; padding: 13px 25px;">
<tr>
<td style="font-size: 20px; font-weight: 600;">Stalk us on our socials 👀</td>
<td style="text-align: right;">
<table width="100%;">
<tr>
<td style="text-align: center;"><a href="https://www.facebook.com/Plixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/HnPDpXZQ/xxx.png"></a></td>
<td
style="border-left: 2px solid #000; text-align: center; border-right: 2px solid #000;">
<a href="https://www.instagram.com/myplixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/wB5C1S4x/xxx.png"></a></td>
<td style="text-align: center;"><a
href="https://www.youtube.com/channel/UCxjpQEVVTxs1P8i9x4KVoKQ/videos"
style="line-height: 0; display: block;""><img src="
https://i.postimg.cc/262gwnfP/xxx.png"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You have a number of large images which are not responsive. You could consider putting max-width:100% on them.
Alternatively, you can fine-tune certain types of images by adding a class to the image and then using a media query. For example:
<style>
#media screen and (max-width:600px) {
.small {
max-width:100px!important;
}
}
</style>
<img class="small" href="..." ...>
I also couldn't get it to be responsive in the browser without having the outer div min-width:100% (and no width or max-width set), and, the table width:100%;max-width:600px;margin:0 auto.
That will get it down to about 420px, but then it's just large tables that can't be made smaller. You could consider using a media query for making certain <td>'s have less padding on mobiles, and/or using a small font-size. Otherwise you will have to make your table differently.
I stuck and basically I do not understand why.
I need to move my <tr> elemnent from right side, directky below other <tr> tags, which are higher.
One requirement: I'm creating mailing template for outlook, so I cannot change display parameters (as I read here), cause it does not work on Outlook client.
I hope that I have made some stupid mistake here which I have not seen yet, or someone will suggest to me some clearer solution.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And if you just remove the first inner table tags?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
By commenting out the below you effectively put them in the same tbody just separate trs. that seems to slide it over as desired.
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have the following code:
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
which produces the following table:
How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
</tbody>
</table>
Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead
Here you have the code with class instead of inline css : (same result but prettier)
.bigRow {
height: 126px;
}
.bigRow-2 {
height: 108px;
}
.bigRow td, .bigRow-2 td {
height: 100%;
width: 50%;
}
.smallRow {
height: 18px;
}
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr class="bigRow">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
<tr class="bigRow-2">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
I need help regarding this because frankly I have been stuck trying to fix it for a while.
Magento transporter wraps the table in a <div> and the <div> element breaks my table and I cannot find anywhere why.
This is the code. Can anyone help?
<table role="presentation" cellpadding="0" cellspacing="0" width="" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > FOX </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
</td>
<td colspan=33% style="">
<? echo ?> L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%"style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table role="presentation" cellpadding="0" cellspacing="0" width="550" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> <? echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > <? echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
<div>
מחיר ₪<? echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=33% style="">
<? echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<? echo $k['reason'] ?>
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<? echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
There's a lot of issue with the formatting of your code that can cause table breaking. When you fix these, it should look this:
<table role="presentation" cellpadding="0" cellspacing="0" width=""
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> FOX</div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
</td>
<td colspan="33%" style="">
L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%" style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" width="550"
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> <?php echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> <?php echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
<div>
מחיר ₪<?php echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="33%" style="">
<?php echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<?php echo $k['reason'] ?>
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<?php echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
Can you please check this out?
My table have too many columns and it overflows the page's 100% width. So I need to add a horizontal scroll bar to table.
But I also need to fix the header for vertical scroll bar when there are too many rows to scroll.
What is the correct way to accomplish it, using CSS and HTML?
First code is a CSS
table .titleFormat{
text-align: center;
width:170px;
font-size:14px;
}
This is HTML code
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px"><div class="titleFormat">A</div></th>
<th width="100px"><div class="titleFormat">B</div></th>
<th width="100px"><div class="titleFormat">C</div></th>
<th width="100px"><div class="titleFormat">D</div></th>
<th width="100px"><div class="titleFormat">E</div></th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>
you can use position:Sticky Element on your th and set the table position:relative and that will do the job.
check below:
table .titleFormat {
text-align: center;
width: 170px;
font-size: 14px;
}
#example-basic {
position: relative;
}
#example-basic th {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
z-index: 100;
background: green;
}
<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
<table id="example-basic" style="width: 100%;">
<thead>
<tr class="TitleHeader">
<th width="200px">
<div class="titleFormat">A</div>
</th>
<th width="100px">
<div class="titleFormat">B</div>
</th>
<th width="100px">
<div class="titleFormat">C</div>
</th>
<th width="100px">
<div class="titleFormat">D</div>
</th>
<th width="100px">
<div class="titleFormat">E</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
<tr>
<td style=" text-align: left ">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
<td style=" text-align: center">
1
</td>
</tr>
</tbody>
</table>
</div>
check this style
I hope you enjoy it
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr th {
background: red;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}