htmlcssnewsletter
Responsive table - Static header column to row
I am trying to create a table similar to this example(Source is from this article I guess and this is the codepen):
In the below example the header column stays fixed when in responsive mode:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>{subject}</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {
border-collapse: collapse;
}
.spacer, .divider {
mso-line-height-rule: exactly;
}
td, th, div, p, a {
font-size: 13px;
line-height: 22px;
}
td, th, div, p, a, h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans');
@media only screen {
.col,
td,
th,
div,
p {
font-family: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
.webfont {
font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
}
a {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
#outlook a,
.links-inherit-color a {
padding: 0;
color: inherit;
}
img {
border: 0;
line-height: 100%;
max-width: 100%;
vertical-align: middle;
}
.col {
font-size: 13px;
line-height: 22px;
vertical-align: top;
}
.hover-scale:hover {
transform: scale(1.2);
}
.video {
display: block;
height: auto;
object-fit: cover;
}
.star:hover a,
.star:hover~.star a {
color: #FFCF0F !important;
}
/* Table */
#overall-table {
width: 100%;
min-width: 100%;
}
#overall-table td {
border-right: 1px solid #00a9e0/*Lines*/
;
border-bottom: 1px solid #00a9e0;
text-align: center;
}
#overall-table td.last {
border-right: 0;
}
#overall-table th {
text-align: center;
border-bottom: 1px solid #00a9e0;
}
/* Table */
@media only screen and (max-width: 800px) {
.video {
width: 100%;
}
u~div .wrapper {
min-width: 100vw;
}
.container {
width: 100% !important;
-webkit-text-size-adjust: 100%;
}
}
@media only screen and (max-width: 480px) {
.col {
box-sizing: border-box;
display: inline-block !important;
line-height: 20px;
width: 100% !important;
}
.col-sm-1 {
max-width: 25%;
}
.col-sm-2 {
max-width: 50%;
}
.col-sm-3 {
max-width: 75%;
}
.col-sm-third {
max-width: 33.33333%;
}
.col-sm-auto {
width: auto !important;
}
.col-sm-push-1 {
margin-left: 25%;
}
.col-sm-push-2 {
margin-left: 50%;
}
.col-sm-push-3 {
margin-left: 75%;
}
.col-sm-push-third {
margin-left: 33.33333%;
}
.full-width-sm {
display: table !important;
width: 100% !important;
}
.stack-sm-first {
display: table-header-group !important;
}
.stack-sm-last {
display: table-footer-group !important;
}
.stack-sm-top {
display: table-caption !important;
max-width: 100%;
padding-left: 0 !important;
}
.toggle-content {
max-height: 0;
overflow: auto;
transition: max-height .4s linear;
-webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover+.toggle-content,
.toggle-content:hover {
max-height: 999px !important;
}
.show-sm {
display: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
max-height: none !important;
}
.hide-sm {
display: none !important;
}
.align-sm-center {
display: table !important;
float: none;
margin-left: auto !important;
margin-right: auto !important;
}
.align-sm-left {
float: left;
}
.align-sm-right {
float: right;
}
.text-sm-center {
text-align: center !important;
}
.text-sm-left {
text-align: left !important;
}
.text-sm-right {
text-align: right !important;
}
.nav-sm-vertical .nav-item {
display: block !important;
}
.nav-sm-vertical .nav-item a {
display: inline-block;
padding: 5px 0 !important;
}
.h1 {
font-size: 32px !important;
}
.h2 {
font-size: 24px !important;
}
.h3 {
font-size: 16px !important;
}
.borderless-sm {
border: none !important;
}
.height-sm-auto {
height: auto !important;
}
.line-height-sm-0 {
line-height: 0 !important;
}
.overlay-sm-bg {
background: #232323;
background: rgba(0, 0, 0, 0.4);
}
u~div .wrapper .toggle-trigger {
display: none !important;
}
u~div .wrapper .toggle-content {
max-height: none;
}
u~div .wrapper .nav-item {
display: inline-block !important;
padding: 0 10px !important;
}
u~div .wrapper .nav-sm-vertical .nav-item {
display: block !important;
}
.p-sm-0 {
padding: 0 !important;
}
.p-sm-8 {
padding: 8px !important;
}
.p-sm-16 {
padding: 16px !important;
}
.p-sm-24 {
padding: 24px !important;
}
.pt-sm-0 {
padding-top: 0 !important;
}
.pt-sm-8 {
padding-top: 8px !important;
}
.pt-sm-16 {
padding-top: 16px !important;
}
.pt-sm-24 {
padding-top: 24px !important;
}
.pr-sm-0 {
padding-right: 0 !important;
}
.pr-sm-8 {
padding-right: 8px !important;
}
.pr-sm-16 {
padding-right: 16px !important;
}
.pr-sm-24 {
padding-right: 24px !important;
}
.pb-sm-0 {
padding-bottom: 0 !important;
}
.pb-sm-8 {
padding-bottom: 8px !important;
}
.pb-sm-16 {
padding-bottom: 16px !important;
}
.pb-sm-24 {
padding-bottom: 24px !important;
}
.pl-sm-0 {
padding-left: 0 !important;
}
.pl-sm-8 {
padding-left: 8px !important;
}
.pl-sm-16 {
padding-left: 16px !important;
}
.pl-sm-24 {
padding-left: 24px !important;
}
.px-sm-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.px-sm-8 {
padding-right: 8px !important;
padding-left: 8px !important;
}
.px-sm-16 {
padding-right: 16px !important;
padding-left: 16px !important;
}
.px-sm-24 {
padding-right: 24px !important;
padding-left: 24px !important;
}
.py-sm-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-sm-8 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.py-sm-16 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.py-sm-24 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/**
Responsive table - taken from https://codepen.io/smashing-magazine/pen/PVGZEQ?editors=1100
*/
@media screen and (max-width: 1140px) {
.insider_company_table {
display: flex;
}
#ic_body_id {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient( farthest-side at 0% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), radial-gradient( farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
#ic_head_id>tr>th,
#ic_body_id>tr>td {
display: block;
}
.numeric {
text-align: right;
}
.text {
text-align: center;
}
}
/*
.table-wrapper {
overflow: auto;
max-width: 100%;
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
*/
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
<div style="display:none;font-size:0;line-height:0;">{preheader}</div>
<modules>
<module label="Text Grid 1 Column" auto="">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" width="100%" style="padding: 0 8px;">
<multi label="Text">
<h1>Transactions</h1>
</multi>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
<module label="Table" auto="">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" width="100%" align="center">
<div class="table-wrapper" tabindex="0">
<table class="insider_company_table" style="border-collapse:collapse" width="100%" id="overall-table" cellpadding="0" cellspacing="0" role="presentation">
<thead id="ic_head_id">
<tr>
<th class="text" style="padding:2px;width:110px" align="left">Product</th>
<th class="text" style="padding:2px" align="center">Name</th>
<th class="text" style="padding:2px" align="center">Buy/Sell</th>
<th class="text" style="padding:2px" align="left">Price</th>
<th class="text" style="padding:2px;width:110px" align="left">Total Transaction</th>
<th class="text" style="padding:2px" align="left">Transaction Date</th>
</tr>
</thead>
<tbody id="ic_body_id" class="insider_company_body">
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 1</td>
<td class="text" style="padding:2px" align="left">Mark<br>Sutterlanderer<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>52.41</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$191,125</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>12.06</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>10.47</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
<module label="Footer 5">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" align="center" width="100%" style="padding: 0 8px;">
<div>
<a href="{homepage}"><img editable="" label="Footer Logo" src="" alt="Footer Logo" width="94" class=""></a>
</div>
<div class="spacer" style="line-height: 12px;">‌</div>
<table class="textbutton" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<a href="{unsublink}" editable="" style="color: #888888;">Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
<div class="spacer" style="line-height: 10px;">‌</div>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">
‌
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
</modules>
<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
hidden="hidden">Notifications</p>
<div id="a11y-speak-assertive" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>
<div id="a11y-speak-polite" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>
</body>
</html>My template should be displayed in a newsletter, therefore I use a lot of tables.
As you can see above the header column does not stay fixed when in responsive mode:
There is one restriction within my app: I could only change the css of table with the class='insider_company_table' as the other parts are part of a newsletter template.
Any suggestions what I am doing wrong and why the rows are not in line with the text?
I appreciate your replies!
Solution
I really doubt you will be able to get as close to screenshot you shared, primary reason being you are displaying table as a flex and your row will expand/collapse based on length of content. Only way to achieve same height for all cells would be to specify specific height for all cells when @media screen and (max-width: 1140px) is applied.
That being said, you can use CSS-grid to:
- Set height of content automatically (it will look distorted if all cells will have content of different length)
@media screen and (max-width: 1140px) {
.wrapper {
display: block;
overflow: auto;
}
.insider_company_table {
display: flex;
}
.insider_company_table thead, tbody {
display: grid;
}
.insider_company_table thead tr, tbody tr {
display: grid;
grid-auto-rows: auto;
}
...
}
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>{subject}</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {
border-collapse: collapse;
}
.spacer, .divider {
mso-line-height-rule: exactly;
}
td, th, div, p, a {
font-size: 13px;
line-height: 22px;
}
td, th, div, p, a, h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans');
@media only screen {
.col,
td,
th,
div,
p {
font-family: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
.webfont {
font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
}
a {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
#outlook a,
.links-inherit-color a {
padding: 0;
color: inherit;
}
img {
border: 0;
line-height: 100%;
max-width: 100%;
vertical-align: middle;
}
.col {
font-size: 13px;
line-height: 22px;
vertical-align: top;
}
.hover-scale:hover {
transform: scale(1.2);
}
.video {
display: block;
height: auto;
object-fit: cover;
}
.star:hover a,
.star:hover~.star a {
color: #FFCF0F !important;
}
/* Table */
#overall-table {
width: 100%;
min-width: 100%;
}
#overall-table td {
border-right: 1px solid #00a9e0/*Lines*/
;
border-bottom: 1px solid #00a9e0;
text-align: center;
}
#overall-table td.last {
border-right: 0;
}
#overall-table th {
text-align: center;
border-bottom: 1px solid #00a9e0;
}
/* Table */
@media only screen and (max-width: 800px) {
.video {
width: 100%;
}
u~div .wrapper {
min-width: 100vw;
}
.container {
width: 100% !important;
-webkit-text-size-adjust: 100%;
}
}
@media only screen and (max-width: 480px) {
.col {
box-sizing: border-box;
display: inline-block !important;
line-height: 20px;
width: 100% !important;
}
.col-sm-1 {
max-width: 25%;
}
.col-sm-2 {
max-width: 50%;
}
.col-sm-3 {
max-width: 75%;
}
.col-sm-third {
max-width: 33.33333%;
}
.col-sm-auto {
width: auto !important;
}
.col-sm-push-1 {
margin-left: 25%;
}
.col-sm-push-2 {
margin-left: 50%;
}
.col-sm-push-3 {
margin-left: 75%;
}
.col-sm-push-third {
margin-left: 33.33333%;
}
.full-width-sm {
display: table !important;
width: 100% !important;
}
.stack-sm-first {
display: table-header-group !important;
}
.stack-sm-last {
display: table-footer-group !important;
}
.stack-sm-top {
display: table-caption !important;
max-width: 100%;
padding-left: 0 !important;
}
.toggle-content {
max-height: 0;
overflow: auto;
transition: max-height .4s linear;
-webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover+.toggle-content,
.toggle-content:hover {
max-height: 999px !important;
}
.show-sm {
display: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
max-height: none !important;
}
.hide-sm {
display: none !important;
}
.align-sm-center {
display: table !important;
float: none;
margin-left: auto !important;
margin-right: auto !important;
}
.align-sm-left {
float: left;
}
.align-sm-right {
float: right;
}
.text-sm-center {
text-align: center !important;
}
.text-sm-left {
text-align: left !important;
}
.text-sm-right {
text-align: right !important;
}
.nav-sm-vertical .nav-item {
display: block !important;
}
.nav-sm-vertical .nav-item a {
display: inline-block;
padding: 5px 0 !important;
}
.h1 {
font-size: 32px !important;
}
.h2 {
font-size: 24px !important;
}
.h3 {
font-size: 16px !important;
}
.borderless-sm {
border: none !important;
}
.height-sm-auto {
height: auto !important;
}
.line-height-sm-0 {
line-height: 0 !important;
}
.overlay-sm-bg {
background: #232323;
background: rgba(0, 0, 0, 0.4);
}
u~div .wrapper .toggle-trigger {
display: none !important;
}
u~div .wrapper .toggle-content {
max-height: none;
}
u~div .wrapper .nav-item {
display: inline-block !important;
padding: 0 10px !important;
}
u~div .wrapper .nav-sm-vertical .nav-item {
display: block !important;
}
.p-sm-0 {
padding: 0 !important;
}
.p-sm-8 {
padding: 8px !important;
}
.p-sm-16 {
padding: 16px !important;
}
.p-sm-24 {
padding: 24px !important;
}
.pt-sm-0 {
padding-top: 0 !important;
}
.pt-sm-8 {
padding-top: 8px !important;
}
.pt-sm-16 {
padding-top: 16px !important;
}
.pt-sm-24 {
padding-top: 24px !important;
}
.pr-sm-0 {
padding-right: 0 !important;
}
.pr-sm-8 {
padding-right: 8px !important;
}
.pr-sm-16 {
padding-right: 16px !important;
}
.pr-sm-24 {
padding-right: 24px !important;
}
.pb-sm-0 {
padding-bottom: 0 !important;
}
.pb-sm-8 {
padding-bottom: 8px !important;
}
.pb-sm-16 {
padding-bottom: 16px !important;
}
.pb-sm-24 {
padding-bottom: 24px !important;
}
.pl-sm-0 {
padding-left: 0 !important;
}
.pl-sm-8 {
padding-left: 8px !important;
}
.pl-sm-16 {
padding-left: 16px !important;
}
.pl-sm-24 {
padding-left: 24px !important;
}
.px-sm-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.px-sm-8 {
padding-right: 8px !important;
padding-left: 8px !important;
}
.px-sm-16 {
padding-right: 16px !important;
padding-left: 16px !important;
}
.px-sm-24 {
padding-right: 24px !important;
padding-left: 24px !important;
}
.py-sm-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-sm-8 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.py-sm-16 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.py-sm-24 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/**
Responsive table - taken from https://codepen.io/smashing-magazine/pen/PVGZEQ?editors=1100
*/
@media screen and (max-width: 1140px) {
.wrapper {
display: block;
overflow: auto;
}
.insider_company_table {
display: flex;
}
.insider_company_table thead,
tbody {
display: grid;
}
.insider_company_table thead tr,
tbody tr {
display: grid;
grid-auto-rows: auto;
}
#ic_body_id {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient( farthest-side at 0% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), radial-gradient( farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
#ic_head_id>tr>th,
#ic_body_id>tr>td {
display: block;
}
.numeric {
text-align: right;
}
.text {
text-align: center;
}
}
/*
.table-wrapper {
overflow: auto;
max-width: 100%;
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
*/
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
<div style="display:none;font-size:0;line-height:0;">{preheader}</div>
<modules>
<module label="Text Grid 1 Column" auto="">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" width="100%" style="padding: 0 8px;">
<multi label="Text">
<h1>Transactions</h1>
</multi>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
<module label="Table" auto="">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" width="100%" align="center">
<div class="table-wrapper" tabindex="0">
<table class="insider_company_table" style="border-collapse:collapse" width="100%" id="overall-table" cellpadding="0" cellspacing="0" role="presentation">
<thead id="ic_head_id">
<tr>
<th class="text" style="padding:2px;width:110px" align="left">Product</th>
<th class="text" style="padding:2px" align="center">Name</th>
<th class="text" style="padding:2px" align="center">Buy/Sell</th>
<th class="text" style="padding:2px" align="left">Price</th>
<th class="text" style="padding:2px;width:110px" align="left">Total Transaction</th>
<th class="text" style="padding:2px" align="left">Transaction Date</th>
</tr>
</thead>
<tbody id="ic_body_id" class="insider_company_body">
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 1</td>
<td class="text" style="padding:2px" align="left">Mark<br>Sutterlanderer<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>52.41</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$191,125</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>12.06</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>10.47</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
<tr style="border-bottom: 1px solid #ccc;" valign="middle" repeatable="" label="Row">
<td class="text" style="padding:2px" align="left">Company 3<br>(ABC)</td>
<td class="text" style="padding:2px" align="left">Joseph<br>Dir</td>
<td class="text" style="padding:2px" align="middle">Buy</td>
<td class="text" style="padding:2px; width: 70px;" align="left">4000 packages @<br>9.97</td>
<td class="text" style="padding:2px; width: 70px;" align="left">$48,440</td>
<td class="text" style="padding:2px" align="right">2020-10-23</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
<module label="Footer 5">
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="800">
<tbody>
<tr>
<td class="px-sm-8" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="col" align="center" width="100%" style="padding: 0 8px;">
<div>
<a href="{homepage}"><img editable="" label="Footer Logo" src="" alt="Footer Logo" width="94" class=""></a>
</div>
<div class="spacer" style="line-height: 12px;">‌</div>
<table class="textbutton" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<a href="{unsublink}" editable="" style="color: #888888;">Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
<div class="spacer" style="line-height: 10px;">‌</div>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">
‌
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</module>
</modules>
<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
hidden="hidden">Notifications</p>
<div id="a11y-speak-assertive" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>
<div id="a11y-speak-polite" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>
</body>
</html>- Use
grid-auto-rows: 1frontrto set same height for all cells:
@media screen and (max-width: 1140px) {
.wrapper {
display: block;
overflow: auto;
}
.insider_company_table {
display: flex;
}
.insider_company_table thead, tbody {
display: grid;
}
.insider_company_table thead tr, tbody tr {
display: grid;
grid-auto-rows: 1fr;
}
...
}
