I want to make my table to keep 50% size of the body and not to out of range of the page size,but when I resize to mobile size like 350px or smaller ,it will out of range.how to solve this ?thanks
View post on imgur.com
css code
<style type="text/css">
body{
padding-top: 10px;
padding-left: 10px;
width: 100%;
}
.scrolltable {
overflow-x: visible;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .header {
}
.scrolltable > .body {
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
/* an outside constraint to react against */
#constrainer {
float: right;
margin-right: 80px;
width: 50%;
height:250px;
}
table {
font-size:22px;
border-collapse: collapse;
}
th, td {
border-radius:25px;
min-width:120px;
}
th {
color: white;
border-width: 1px;
font-weight: bold;
background-color:#3986d3;
padding-top: 5px;
padding-bottom: 5px;
}
td {
border-width: 1px;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
}
tr:first-child td {
border-top-width: 0;
}
tr:nth-child(even) {
background-color:#f2f2f2 ;
}
tr:hover{background-color:#BEBEBE}
</style>
HTML below
<body>
<div id="constrainer">
<div class="scrolltable">
<table class="header">
<thead>
<th>
工位
</th>
<th>
位置
</th>
<th>
速度
</th>
<th>
加速度
</th>
<th>
減速度
</th>
<th>
加加速度
</th>
</thead>
</table>
<div class="body">
<table>
<tbody>
<tr>
<td>原點</td>
<td id="inp01"></td>
<td id="inp02"></td>
<td id="inp03"></td>
<td id="inp04"></td>
<td id="inp05"></td>
</tr>
<tr>
<td>01</td>
<td id="inp11"></td>
<td id="inp12"></td>
<td id="inp13"></td>
<td id="inp14"></td>
<td id="inp15"></td>
</tr>
<tr>
<td>02</td>
<td id="inp21"></td>
<td id="inp22"></td>
<td id="inp23"></td>
<td id="inp24"></td>
<td id="inp25"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button id="btnright1" style="width:50px; height:50px;" />
<div style="margin-left:100px;">
<p>速度</p> <input id="setSpeed" type="number" style="width:100px; height:30px; border-radius: 20px; " />
</div>
</body>
Updated you code..I am guessing that is what you wanted.
you should also use the viewport meta tag in you head to control layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"/>
body {
padding-top: 10px;
padding-left: 10px;
}
.scrolltable {
height: 50vh;
overflow-x: visible;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .header {} .scrolltable > .tbody {
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
/* an outside constraint to react against */
table {
font-size: 90%;
border-collapse: collapse;
}
th,
td {
border-radius: 25px;
width: 120px;
}
th {
color: white;
border-width: 1px;
font-weight: bold;
background-color: #3986d3;
padding-top: 5px;
padding-bottom: 5px;
}
td {
border-width: 1px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
tr:first-child td {
border-top-width: 0;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #BEBEBE
}
<body>
<div id="constrainer">
<div class="scrolltable">
<table class="header">
<thead>
<th>
工位
</th>
<th>
位置
</th>
<th>
速度
</th>
<th>
加速度
</th>
<th>
減速度
</th>
<th>
加加速度
</th>
</thead>
</table>
<div class="tbody">
<table>
<tbody>
<tr>
<td>
原點
</td>
<td id="inp01">
</td>
<td id="inp02">
</td>
<td id="inp03">
</td>
<td id="inp04">
</td>
<td id="inp05">
</td>
</tr>
<tr>
<td>
01
</td>
<td id="inp11">
</td>
<td id="inp12">
</td>
<td id="inp13">
</td>
<td id="inp14">
</td>
<td id="inp15">
</td>
</tr>
<tr>
<td>
02
</td>
<td id="inp21">
</td>
<td id="inp22">
</td>
<td id="inp23">
</td>
<td id="inp24">
</td>
<td id="inp25">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="btnright1" style="width:50px; height:50px;" />
<div style="margin-left:100px;">
<p>速度</p>
<input id="setSpeed" type="number" style="width:100px; height:30px; border-radius: 20px; " />
</div>
</div>
</body>
You should learn about media-queries
So i don't know what is possible layout you wan't but i'll show you the result what i did using media queries.
Queries.css
/* Small phones: from 0 to 480px */
#media only screen and (max-width: 480px) {
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
table{
font-size: 10px !important;
margin-left: 80px;
}
scrolltable > .body {
/*noinspection CssInvalidPropertyValue*/
width: 100% !important;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
#constrainer {
width: 100% !important;
}
#btnright1{
margin:30px 0;
}
}
As Other person told you have to read media queries for sure. And try read bootstrap for the Responsive this was one was real easy to understand
This was the syntax for media query
#media not|only mediatype and (media feature) {
CSS-Code;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
I am developing dynamic HTML templates for sending emails to clients. the template I have developed is working fine on large screens but on medium and small screens I am facing one design issue. the template supposed to be like this
it should be surrounded by light grey color and body with white color. the template I have developed is also the same but for mobiles, it is like this
As you can see the light grey color on the sides is not visible as the content occupied all the space. I need to make it visible for mobile screens as well. I have tried applying some padding and reducing width but it is not working. JSfiddle link is not taking by the stack overflow so dropping it in the comments please check it and any help is very much appreciated. [JSfiddle][3]
/* Take care of image borders and formatting, client hacks */
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.backgroundTable {
margin: 0 auto;
padding: 0;
width: 100% !important;
}
.branding {
display: inline-flex;
align-items: center;
margin-left: 1%;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
.container-for-gmail-android {
min-width: 600px;
background-color: white;
}
/* General styling */
* {
font-family: Helvetica, Arial, sans-serif;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
margin: 0 !important;
height: 100%;
color: #676767;
}
td {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #777777;
text-align: center;
line-height: 21px;
}
th {
padding-top: 12px;
text-align: left;
color: white;
}
.report-table {
border: 3px solid #707070;
margin-top: 20px;
}
.report-table th {
background-color: #333333;
}
.border {
border: 1px solid grey;
}
table {
border-collapse: collapse;
}
/* table [class ~= "report-table"]{
border:1px solid#007770;
} */
.marks {
display: inline-block;
color: white;
width: 50px;
text-align: center;
background-image: linear-gradient(246deg, #0080FF, #072F9C);
line-height: 2;
letter-spacing: 1.6px;
vertical-align: top;
}
.sub {
width: 210px;
display: inline-block;
max-width: 300px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}
.p-logo {
width: 50px;
float: left;
}
.source {
text-align: left;
}
.white td {
color: white;
}
.attempted {
text-align: left;
}
.attempted p {
/* display: inline-block; */
margin-right: 10px;
float: left;
line-height: 1;
}
.mod-title {
text-align: left;
padding-top: 20px;
}
.mod-title,
.attempted {
padding-left: 15px;
padding-right: 15px;
}
.img {
float: right;
margin-right: 0px;
margin-top: -70px;
margin-bottom: -70px;
width: 152px;
}
.report-table td,
.report-table th {
border: 1px solid gainsboro;
padding: 5px;
text-align: center;
}
.report-table tr:nth-child(even) {
background-color: #f2f2f2;
}
/* .report-table tr:hover {background-color: #ddd;} */
.week {
background-color: gainsboro;
display: inline-block;
padding: 5px;
border-radius: 10px;
/* font-size: 20px; */
margin-bottom: 10px;
}
.weekdays {
color: #0080FF;
background-color: gainsboro;
border: 1px solid white !important;
}
.report-scores {
color: white;
}
.header-lg,
.header-md,
.header-sm {
/* font-size: 32px; */
font-size: 1.5em;
font-weight: 700;
line-height: normal;
padding: 35px 0 0;
color: #4d4d4d;
}
.sub-head {
font-size: 1.5em;
line-height: 2;
padding-bottom: 30px;
letter-spacing: 0.6px;
padding-top: 20px;
}
.header-summary td {
padding-top: 10px;
font-size: 1.6em;
letter-spacing: 1.6px;
padding-bottom: 20px;
font-weight: 600;
}
.header-md {
font-size: 24px;
}
.header-sm {
padding: 5px 0;
font-size: 18px;
line-height: 1.3;
}
.mobile-header-padding-right {
width: 290px;
text-align: right;
padding-left: 10px;
}
.mobile-header-padding-left {
width: 290px;
text-align: left;
padding-left: 10px;
}
.force-width-gmail {
min-width: 600px;
height: 0px !important;
line-height: 1px !important;
font-size: 1px !important;
}
</style><style type="text/css" media="screen">#import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
</style><style type="text/css" media="screen">#media screen {
/* Thanks Outlook 2013! */
* {
font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
}
}
</style><style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */
#media only screen and (max-width: 480px) {
.mobile-font-xl {
font-size: 30px;
}
.mobile-font-lg {
font-size: 28px;
}
.mobile-font-sm {
font-size: 24px;
}
.mobile-font-md {
font-size: 26px;
}
.img {
display: none;
}
table[class*="container-for-gmail-android"] {
min-width: 290px !important;
width: 100% !important;
}
table[class="w320"] {
width: 320px !important;
}
td[class="bottom_description"] {
font-size: 18px;
}
img[class="force-width-gmail"] {
display: none !important;
width: 0 !important;
height: 0 !important;
}
td[class*="mobile-header-padding-left"] {
width: 160px !important;
padding-left: 0 !important;
}
td[class*="mobile-header-padding-right"] {
width: 160px !important;
padding-right: 10px !important;
font-size: 18px !important;
}
td[class="info-block"] {
display: block !important;
width: 280px !important;
padding-bottom: 40px !important;
}
td[class="info-img"],
img[class="info-img"] {
width: 278px !important;
}
.week {
font-size: 20px;
}
.report-table,
.report-table td {
font-size: 18px;
}
}
</style><style type="text/css" #media="only screen and (min-width:481px) and (max-width:768px)">#media only screen and (min-width:481px) and (max-width:768px) {
td[class="bottom_description"] {
font-size: 18px;
}
td[class*="mobile-header-padding-right"] {
padding-right: 10px !important;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Xamplay - Courses Activated</title>
</head>
<body style="background-color:#f0f0f0;">
<table align="center" cellpadding="0" cellspacing="0" width="770" class="w320">
<tr>
<td width="100%" style="text-align: left;">
<div class="branding">
<img class="p-logo" src="https://xamplay.com/assets/xamplay-logo.png">
<h1 class="source">Xamplay</h1>
</div>
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android w320" width="600">
<tr>
<td align="center" valign="top" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td class="header-lg mobile-font-xl" style="color:#4d4d4d;padding-top:40px;">
Hey {{ givenName }}
</td>
</tr>
<tr>
<td style="color:#4d4d4d" class="sub-head mobile-font-lg">
Here's your Weekly Performance Report.
<br> {{ courseName }}
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table style="margin-bottom:30px; " width="600" class="w320 coverage-box">
<tr style="color:#4d4d4d">
<td class="mobile-font-md">Modules Studied</td>
<td class="mobile-font-md">Quiz Attempts</td>
<td class="mobile-font-md">Test Attempts</td>
</tr>
<tr class="header-summary" style="color:#4d4d4d">
<td>{{ totalModCount }}</td>
<td>{{ totalQuizCount }}</td>
<td>{{ totalTestCount }}</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="content-padding">
<center>
<table align="center" cellspacing="10" cellpadding="0" width="600" class="w320 coverage-box">
<tr>
<td style="text-align: center;-webkit-text-align:center;padding:20px;" class="mobile-font-lg">
<b>startDate - endDate</b></td>
</tr>
<tr>
<td class="header-lg mobile-font-md" style="padding-bottom: 30px;padding-top: 20px;">
How much have you covered :
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table style="margin-bottom:10px; " width="600" class="w320 coverage-box">
<!-- display this row for odd indexes -->
{{#each progress}} {{#if index%2==1}}
<tr style="display:inline-block;margin-bottom:20px">
<td style="text-align:left;">
<span class="sub mobile-font-md">
NATA
</span>
<span class="marks mobile-font-sm">94%</span>
</td>
</tr>
{{/if}}
<!-- display this row for even indexes -->
{{#if index%2==0}}
<tr style="float:right;width: 48%;margin-bottom:20px;">
<td style="text-align:left;">
<span class="sub mobile-font-md">
NIFT
</span>
<span class="marks mobile-font-sm">100%</span>
</td>
</tr>
{{/if}} {{/each}}
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;" class="content-padding">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320 report-table">
<tr>
<th>
<p class="mobile-font-sm">Activity</p>
</th>
<th>
<p class="mobile-font-sm">Study Modules</p>
</th>
<th>
<p class="mobile-font-sm">Quizzes</p>
</th>
<th>
<p class="mobile-font-sm">Tests</p>
</th>
<th>
<p class="mobile-font-sm">Daily Quizes</p>
</th>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Mon</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.test_count}}</p>
</td>
<td>
{{#each activities.mon.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr class="mobile-font-sm">
<td class="weekdays mobile-font-sm">
<p class="mobile-font-sm">Tue</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.test_count}}</p>
</td>
<td>
{{#each activities.tue.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr class="mobile-font-sm">
<td class="weekdays">
<p class="mobile-font-sm">Wed</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.test_count}}</p>
</td>
<td>
{{#each activities.wed.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Thurs</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.test_count}}</p>
</td>
<td>
{{#each activities.thu.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Fri</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.test_count}}</p>
</td>
<td>
{{#each activities.fri.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Sat</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.test_count}}</p>
</td>
<td>
{{#each activities.sat.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Sun</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.test_count}}</p>
</td>
<td>
{{#each activities.sun.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320 " align="left">
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Modules Studied</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.modules}} {{_module.name}} {{/each}} {{#each activities.tue.modules}} {{_module.name}} {{/each}} {{#each activities.wed.modules}} {{_module.name}} {{/each}} {{#each activities.thu.modules}} {{_module.name}} {{/each}} {{#each activities.fri.modules}}
{{_module.name}} {{/each}} {{#each activities.sat.modules}} {{_module.name}} {{/each}} {{#each activities.sun.modules}} {{_module.name}} {{/each}}
</td>
</tr>
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Quiz Attempted</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.quizzes}} {{quiz.name}} {{/each}} {{#each activities.tue.quizzes}} {{quiz.name}} {{/each}} {{#each activities.wed.quizzes}} {{quiz.name}} {{/each}} {{#each activities.thu.quizzes}} {{quiz.name}} {{/each}} {{#each activities.fri.quizzes}}
{{quiz.name}} {{/each}} {{#each activities.sat.quizzes}} {{quiz.name}} {{/each}} {{#each activities.sun.quizzes}} {{quiz.name}} {{/each}}
</td>
</tr>
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Test Attempted</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.tests}} {{test.name}} {{/each}} {{#each activities.tue.tests}} {{test.name}} {{/each}} {{#each activities.wed.tests}} {{test.name}} {{/each}} {{#each activities.thu.tests}} {{test.name}} {{/each}} {{#each activities.fri.tests}}
{{test.name}} {{/each}} {{#each activities.sat.tests}} {{test.name}} {{/each}} {{#each activities.sun.tests}} {{test.name}} {{/each}}
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td style="padding: 25px 0 25px">
<p style="color:#6E6E6E;opacity: 0.8;" class="mobile-font-xl">Powered by Xamplay Edutech Pvt Ltd.
</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
I have checked your code and I should say that your code would not be rendered properly on most of the devices and mail applications. some "div" and "pseudo-classes" have been used and I think you need to reconsider your design to avoid using such elements and syntaxes. Also, please make all of your styles in-line, then it would not be omitted by Mail Servers and Mail Applications. You can use the following link to validate/preview your email template.
Email HTML Validator
But for your primary question, I need to say that making Responsive Tables is a little bit hard and makes user experience issues for the customer, So I believe that you may have the following options to either have Accessibility and Customer Experience together:
1- Rethink about the design and do the design based on Customer Centricity Principles, For example, if your customers are probably using their phones for checking their emails ( most probable option ) so you need to consider that scrolling a Table or following a table on a small screen is not a good experience, so you need to make the design somehow horizontal or grouped in a not table-style block.
2- Put a Call to Action Button that opens a user-specific generated link that does not require user login and show the details with more interactive features like collapsable accordions with the power of Fully Supported CSS and JS engines.
3- Generated PDF and attach it to the email for the users. ( most of the users do not like it because it would need to be downloaded and allocating space on user devices, might it needs some applications to open it, and so forth. )
I have placed the image but it breaks when we resize the window.
I want it in the center of the first column which is description below the email service.
I want it to remain in the center all the time.
I have given the td position relative and made the image absolute position. Its relative to the td................................
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">Email Service
<img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
Wrap the text and the image inside a div with a flex box property, and then you can center it as you like
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
.flex-b {
display:flex;
align-items:center;
justify-content:center;
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-b">
<span>Email Service</span>
<img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</div>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
i'm creating a very basic html email layout, an one column layout:
this is the layout skeleton:
<html>
<head>
<body>
<table class="outer">
<tr> <!-- structure of a single row-->
<td class="one column">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr> <!--END of a row-->
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
</body>
</head>
</html>
in one row i have a button, its width is 100%:
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td align="center" bgcolor="#cc9435" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;" ><a href="#" target="_blank" style="font-size:16px;font-family:sans-serif, Helvetica, Arial;color:#ffffff;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:12px;padding-bottom:12px;padding-right:18px;padding-left:18px;border-width:1px;border-style:solid;border-color:#cc9435;display:inline-block;" >button</a></td>
</tr>
<tr>
<td class="spacer">
</td>
</tr>
</table>
</td>
</tr>
css:
/* One column layout */
.one-column .contents {
text-align: center;
}
.one-column p {
Margin-bottom: 10px;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background-color: #ffffff
}
the button cover the entire width of the template, how can i make it smaller and centered? with on td in a row seems not quite possible, i try with setting margin but obviously doesnt work
thanks
The issues I found in the code are.
There is no need to capitalize CSS classes. Not an issue but just stating!
Since you are setting the background-color for the td element (bgcolor="#cc9435"), it seemed like the button was taking the full width of the table. I moved the background to the a tag alone using the background-color CSS property.
I have reduced the padding property to one line padding:12px 18px where 12px is for the top and bottom padding and 18px is for the left and right padding, you need to increase the left and right padding to see and increase in the width of the button.
Let me know if this fixes your issue!
.td-style {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0px;
}
.a-style {
font-size: 16px;
font-family: sans-serif, Helvetica, Arial;
color: #ffffff;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 12px 18px;
border-style: solid;
border-color: #cc9435;
display: inline-block;
background-color: #cc9435;
}
.one-column .contents {
text-align: center;
}
.one-column p {
margin-bottom: 10px;
}
.outer {
margin: 0 auto;
width: 100%;
max-width: 600px;
background-color: #ffffff
}
<html>
<head>
<body>
<table class="outer">
<tr>
<!-- structure of a single row-->
<td class="one column">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<!--END of a row-->
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td align="center" style="td-style">
button
</td>
</tr>
<tr>
<td class="spacer">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
Add width and bg color only to a tag
<td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;">button</td>
Before update
https://jsfiddle.net/17oj738e
After Update
https://jsfiddle.net/17oj738e/1/
I have a table that looks like this:
And every row has a hidden details field:
So I want to remove border spacing from row and its details row.. How can I do that?
this is my HTML:
<table class="table message-table">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Action</th>
<th></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let message of messages | paginate: config">
<tr>
<td>{{message.title}}</td>
<td>{{message.created | date:'longDate'}}</td>
<td (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
<td></td>
</tr>
<tr id="collapseExample" [ngbCollapse]="message.collapsed">
<td>{{message.text}}</td>
<td colspan="3"></td>
</tr>
</ng-container>
</tbody>
</table>
and this is my SCSS:
.messages {
background-color: $color-background-main;
min-height: 17rem;
overflow-x: auto;
padding-top: 2rem;
.message-table {
border-collapse: separate;
border-spacing: 0 0.4rem;
thead {
th {
border: none;
font-size: 0.6rem;
color: #9b9b9b;
text-transform: uppercase;
padding-top: 0;
padding-bottom: 0;
&:first-child {
width: 70%;
padding-left: 1rem;
}
}
}
}
tbody {
tr {
box-shadow: $main-shadow;
background-color: white;
&.selected {
box-shadow: $shadow-selected;
}
td:first-child {
padding-left: 1rem;
}
}
td {
background-color: white;
border: none;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
height: 2.5rem;
vertical-align: middle;
table-layout: fixed;
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding-right: 0;
width: 2rem;
}
}
}
}
How can I fix this? I've tried making tr a top border but nothing happened... What are other solutions for my problem?
UPDATE 1
Adding codepen of a simple example : https://codepen.io/anon/pen/prxgOe
UPDATE 2
I want to remove spacing between title and details tr elements ONLY!
Here is a quick fix using borders.
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
}
.title {
border-top: 5px solid #fff;
}
.details {
/* display: none; */
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
I think you want like this
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
.title:first-child {
border-top: 7px solid #fff;
}
.title {
border-top: 12px solid #fff;
}
tbody tr:nth-child(2n) {
position: relative;
}
tbody tr:nth-child(2n)::after {
bottom: 0;
box-shadow: 0 2px 2px 0 #ebebeb;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
*ngFor has an option to detect odd and even rows:
<div *ngFor="let message of messages; let odd=odd; let even=even>..</div>
then you can use odd or even values to set style/class as so:
<div [class.evenClass]="event" [class.oddClass]="odd">...</div>
and in the stylesheet, define .evenClass and .oddClass style as needed.
P.S.You have a table layout, you need to adapt above to your case
#hunzaboy and #ankitapatel answers were kind of good for me, but eventually I came with different solution which is probably not the best one, but it works like a charm... It does not break the ui scalability or anything else...
So I just added div elements in each of td elements so my HTML now looks like this:
<tbody>
<ng-container *ngFor="let message of messages | paginate: config">
<tr>
<td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td>
<td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td>
<td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
<td></td>
</tr>
<tr id="collapseExample" [ngbCollapse]="message.collapsed">
<td>
<div class="text-container">{{message.text}}</div>
</td>
<td colspan="3">
<div class="empty-container"></div>
</td>
</tr>
</ng-container>
</tbody>
and then I added this SCSS to my file:
#collapseExample {
td {
padding: 0;
}
.text-container {
background-color: #fff;
margin-top: -23px;
padding-left: 1rem;
border-radius: 0.2rem;
height: 100%;
padding-bottom: 1rem;
}
.empty-container {
background-color: #fff;
height: 100%;
margin-top: -20px;
width: 100%;
}
}
I intend to do this:
Left Side Column ---> Frozen
Right Side Column ---> Scrollable
The problem that I'm facing currently is that only <td> part is getting frozen. and the <th> has no effect of the code. I couldn't figure out how to get this fixed? Any help would be much appreciated.
Thanks in advance.
HTML code:
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table" >
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long"><h3>Sheet</h3></th>
<th class="header"><h3>Part Type</h3></th>
<th class="header"><h3>Options</h3></th>
<th class="header"><h3>Customer</h3></th>
<th class="header"><h3>Code</h3></th>
<th class="header"><h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol"><h3>ABC01</h3></td>
<td class="row-content"><h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
CSS code:
.padding-right-5 {
padding-right: px;
}
.max_width_300 {
max_width : 300px;
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
Added few fixes. Hope this will get you started.
.padding-right-5 {
padding-right: 5px;
}
.max_width_300 {
max-width : 300px;
}
.long{
position: absolute; /* added this */
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
background: #fff; /*added this */
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table">
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long">
<h3>Sheet</h3></th>
<th class="header">
<h3>Part Type</h3></th>
<th class="header">
<h3>Options</h3></th>
<th class="header">
<h3>Customer</h3></th>
<th class="header">
<h3>Code</h3></th>
<th class="header">
<h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol">
<h3>ABC01</h3></td>
<td class="row-content">
<h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>