I tried to create a responsive pricing table, but not working.
I tried below way but it's not working. I tried to google but I can't figure out the useful links.
Please suggest me to do this right away.
.table tr.hide-table-padding td {
padding: 0;
}
.expand-button {
position: relative;
}
.accordion-toggle .expand-button:after {
position: absolute;
left:.75rem;
top: 50%;
transform: translate(0, -50%);
content: '-';
}
.accordion-toggle.collapsed .expand-button:after {
content: '+';
}
</style>
<style type="text/css">/* Chart.js */
#-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}#keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<td class="expand-button"></td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
Please suggest me to create the same as.
Try using width: 100% to fill the screen horizontally:
.table tr.hide-table-padding td {
padding: 0;
}
.table {
width: 100%;
}
.expand-button {
position: relative;
}
.accordion-toggle .expand-button:after {
position: absolute;
left: .75rem;
top: 50%;
transform: translate(0, -50%);
content: '-';
}
.accordion-toggle.collapsed .expand-button:after {
content: '+';
}
</style><style type="text/css">
/* Chart.js */
#-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
#keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<td class="expand-button"></td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
Related
listData below is a dynamic array of data. I'm trying to print the data in to a PDF using expo-print.
How can I dynamically populate required number of table rows based on the array length and print each result in a seperate row?
"listdata": [
"OAG0001",
"RAA0012",
"RAA0098",
"RAB0023",
"UAE0014"
]
What I've tried so far below obviously prints the total array in to a single table row.
const printLoadOutData = () => {
setPrintLoadoutLoader(true);
const dataLoadOutToprint = `
<html>
<header>
</header>
<title></title>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table >
<tr>
<td>"${listData}"</td>
</tr>
</table>
</body>
</html >`;
Print.printAsync({
html: dataLoadOutToprint,
width: 3508,
height: 2480,
orientation: Print.Orientation.landscape
})
.then(() => {
setPrintLoadoutLoader(false);
})
.catch(() => {
setPrintLoadoutLoader(false);
})
}
You need to do something like this:
const listdata = [
"OAG0001",
"RAA0012",
"RAA0098",
"RAB0023",
"UAE0014"
];
const htmltable = () => {
let t = '';
for (let i in listdata) {
const item = listdata[i];
t = t +
`<tr>
<td>${item}</td>
</tr>`
}
return t;
}
Html content be like:
const htmlContent =
`<html>
<header></header>
<title></title>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table>
${htmltable()}
</table>
</body>
</html>`;
Print function:
const print = () => {
Print.printAsync({
html: htmlContent,
width: 3508,
height: 2480,
orientation: Print.Orientation.landscape
}).then(() => {
setPrintLoadoutLoader(false);
}).catch(() => {
setPrintLoadoutLoader(false);
})
}
Using expo-print for react native
import * as Print from "expo-print";
import { shareAsync } from "expo-sharing";
htmltable = () => {
let t = '';
for (let i in this.state.data) {
const item = this.state.data[i];
t = t +
`<tr>
<td style="border: 1px solid #000000;text-align: center;padding: 8px">${item.p_sku}<br/></td>
<td style="border: 1px solid #000000;text-align: center;padding: 8px">${item.p_name}<br/></td>
<td style="border: 1px solid #000000;text-align: center;padding: 8px">${item.p_price}<br/></td>
<td style="border: 1px solid #000000;text-align: center;padding: 8px">${item.p_quantity}<br/></td>
<td style="border: 1px solid #000000;text-align: center;padding: 8px">${item.p_incl_tax_total}<br/></td>
</tr>`
}
return t;
}
in render-> use like this
<TouchableOpacity
style={styles.buttonstyle}
onPress={async () => {
const { uri } = await Print.printToFileAsync({
html: `
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body style="text-align: center;">
<h1>Order: ${Constant.ORDER_ID}</h1>
<p>
<strong>Order Date: ${this.state.Orderdate}</strong><br/>
<strong>Order Total: ${this.state.OrderTotal}</strong><br/>
<strong>Status: ${this.state.OrderStatus}</strong>
<br/>
<br/>
<table style="width:100%">
<tr>
<th style="text-align:left"><strong>Shipping Address</strong></th>
<th style="text-align:left"><strong>Billing Address</strong></th>
</tr>
<tr>
<td>Name: ${this.state.shippingname}<br/></td>
<td>Name: ${this.state.billingname}<br/></td>
</tr>
<tr>
<td>Total : ${this.state.OrderTotal}<br/></td>
<td>Email: ${this.state.Billingemail}<br/></td>
</tr>
<tr>
<td>Email: ${this.state.shippingemail}<br/></td>
<td>Ph: ${this.state.Billingphone}<br/></td>
</tr>
<tr>
<td>Ph: ${this.state.shippingphone}<br/></td>
<td>Fax: ${this.state.Billingfax}<br/></td>
</tr>
<tr>
<td>Fax: ${this.state.shippingfax}<br/></td>
<td>Company: ${this.state.Billingcompany}<br/></td>
</tr>
<tr>
<td>Company: ${this.state.shippingcompany}<br/></td>
<td>Address: ${this.state.Billingaddress}<br/></td>
</tr>
<tr>
<td>Address: ${this.state.shippingaddress}<br/></td>
</tr>
</table>
<table style="width:100%">
<tr>
<th style="text-align:left"><strong>Payment</strong></th>
<th style="text-align:left"><strong>Shipping</strong></th>
</tr>
<tr>
<td>Payment method: ${this.state.PaymentMethod}<br/></td>
<td>Shipping method: ${this.state.ShippingMethod}<br/></td>
</tr>
</table><br/><br/>
<strong>Products: </strong><br/>
<table style="width:100%;border-collapse: collapse">
<tr>
<th style="border: 1px solid #000000;text-align: center;padding: 8px"><strong>SKU</strong></th>
<th style="border: 1px solid #000000;text-align: center;padding: 8px"><strong>Name</strong></th>
<th style="border: 1px solid #000000;text-align: center;padding: 8px"><strong>Price</strong></th>
<th style="border: 1px solid #000000;text-align: center;padding: 8px"><strong>Quantity</strong></th>
<th style="border: 1px solid #000000;text-align: center;padding: 8px"><strong>Total</strong></th>
</tr>
${this.htmltable()}
</table>
<br/>
<br/>
<table style="width:30%;border-collapse: collapse">
<tr>
<th style="border: 1px solid #000000;text-align: left;padding: 8px"><strong>Sub-Total: ${this.state.OrderSubtotalExclTax}</strong></th>
</tr>
<tr><th style="border: 1px solid #000000;text-align: left;padding: 8px"><strong>Shipping: ${this.state.OrderTax}</strong></th>
</tr>
<tr><th style="border: 1px solid #000000;text-align: left;padding: 8px"><strong>Tax: ${this.state.OrderTax}</strong></th>
</tr>
<tr><th style="border: 1px solid #000000;text-align: left;padding: 8px"><strong>Order Total: ${this.state.OrderTotal}</strong></th>
</tr>
</table>
</p>
</body>
</html>
`,
});
// console.log("File has been saved to:", uri);
await shareAsync(uri, { UTI: ".pdf", mimeType: "application/pdf" });
}}
>
<Text
style={{
color: "white",
fontWeight: "bold",
fontSize: 16,
textTransform: "uppercase",
letterSpacing: 1,
}}
>
Print
</Text>
</TouchableOpacity>
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.
<template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add"><a class="add-link"><span #click="insert_Row()" class="plus-icon">+</span></a></td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2',"<input type='text'>", "<input type='text'>", "<input type='text'>"],
counter: 2
},
methods: {
insert_Row() {
this.counter++;
this.tableRows.push("D " +this.counter);
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border:1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover, &:focus {
border:1px solid #182241;
background-color: #182241;
}
}
</style>
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.* <template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click="insert_Row()" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2', " < input type = 'text' > ", " < input type = 'text' > ", " < input type = 'text' > "], counter: 2 }, methods: { insert_Row() { this.counter++; this.tableRows.push("
D " +this.counter); } } }
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style> ``` Okay now, after a good response, I have edited the code. It now looks like this. ``` <template>
<table id="myTable">
<tbody>
<tr>
<td scope="row" data-label="">D1</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr>
<td scope="row" data-label="">D2</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td scope="row" data-label="">D{{item.id}}</td>
<td data-label="Filename">
<input type="text" v-model="item.Filename">
</td>
<td data-label="Image Title">
<input type="text" v-model="item.ImageTitle">
</td>
<td data-label="Caption">
<input type="text" v-model="item.Caption">
</td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click.stop="insert_Row" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableRows: [{
"id": 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
}]
}
},
methods: {
insert_Row() {
this.tableRows.push({
"id": this.tableRows.length + 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
})
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style>
I want to only have the icon plus on the last row cell. I wish to hide or remove the others, but also, I edited the code to start with 3 rows instead of one.
Your data should be reactive.
You should bind your data to the html inputs.
You need to rethink your code a lot. Here is an example of how you could get started: Vue SFC Playground
I want to get email body from in html format,
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
'description': msg.get('body'),
}
I want to get email body to description but when I use 'description': msg.get('body'), it takes all on text format,
I want to get email body on HTML format
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Christmas Email template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
#media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
.em_text1 {
font-size: 16px !important;
line-height: 24px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
</style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#efefef">
<table class="em_full_wrap" valign="top" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#efefef" align="center">
<tbody><tr>
<td valign="top" align="center"><table class="em_main_table" style="width:700px;" width="700" cellspacing="0" cellpadding="0" border="0" align="center">
<!--Header section-->
<tbody><tr>
<td style="padding:15px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;" valign="top" align="center">Test Email Sample | View Online</td>
</tr>
</tbody></table></td>
</tr>
<!--//Header section-->
<!--Banner section-->
<tr>
<td valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img class="em_img" alt="merry Christmas" style="display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;" src="images/05be8b57-6b90-4ebd-ba17-4014c79f2e4b.jpg" width="700" border="0" height="345"></td>
</tr>
</tbody></table></td>
</tr>
<!--//Banner section-->
<!--Content Text Section-->
<tr>
<td style="padding:35px 70px 30px;" class="em_padd" valign="top" bgcolor="#0d1121" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;" valign="top" align="center">This is a sample email which shall be accommodated in a single paragraph</td>
</tr>
<tr>
<td style="font-size:0px; line-height:0px; height:15px;" height="15"> </td>
<!--—this is space of 15px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center">This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td>
</tr>
<tr>
<td class="em_h20" style="font-size:0px; line-height:0px; height:25px;" height="25"> </td>
<!--—this is space of 25px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center"> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td>
</tr>
</tbody></table></td>
</tr>
<!--//Content Text Section-->
<!--Footer Section-->
<tr>
<td style="padding:38px 30px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="padding-bottom:16px;" valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img src="images/fb.png" alt="fb" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/tw.png" alt="tw" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;" width="27" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/yt.png" alt="yt" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center">PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS<br>
© 2017 Companyname. All Rights Reserved.<br>
If you do not wish to receive any further emails from us, please unsubscribe</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"><img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<div class="em_hide" style="white-space: nowrap; display: none; font-size:0px; line-height:0px;"> </div>
</body></html>
here is the basic function when creating new ticket (incoming message)
#api.model
def message_new(self, msg, custom_values=None):
""" Overrides mail_thread message_new that is called by the mailgateway
through message_process.
This override updates the document according to the email.
"""
# remove default author when going through the mail gateway. Indeed we
# do not want to explicitly set user_id to False; however we do not
# want the gateway user to be responsible if no other responsible is
# found.
create_context = dict(self.env.context or {})
create_context['default_user_id'] = False
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
}
if custom_values:
defaults.update(custom_values)
res_id = super(ProjectIssue, self.with_context(create_context)).message_new(msg, custom_values=defaults)
issue = self.browse(res_id)
email_list = issue.email_split(msg)
partner_ids = filter(None, issue._find_partner_from_emails(email_list))
issue.message_subscribe(partner_ids)
return res_id
when I add
'description' : msg.get('body'),
I can get the body of the email, but its on text format,
then I check on 'description' and I found this
description = fields.text('Private Note')
that's why I only get text format, not HTML format,
so I change the description format to this
description = fields.Html('Private Note')
then the format of description is back to normal and readable.
I am not able to get this HTML email to align center or at least Left in Outlook window. I need help figuring out what is set up incorrectly here. Thank you for all your help. I have tried different ways to update and try to center it. It shows like it's center on the minimized view, but when expanded in outlook window, it is all they way to the right.
Your help will be much appreciated to fix this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
</table>
</body>
</html>
I wrapped an additional table around your 3 column layout, then wrapped that with a center tag, and set all of the surrounding tables and tds to 100% width and align center. See this on JSFiddle.
<html>
<head>
<title>Learning Assignment Changes Notification</title>
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align=" center " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px; " width="560 ">
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#ccffff; ">
<tr>
<td><img src="addlogo " /></td>
<td align="right ">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0 " cellspacing="0 " border="0 " width="100% ">
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText1 " />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Added</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD ">
<CPNT_ID_ADDED/>
</td>
<td class="myTD ">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD ">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText2 " />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Revision Date</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD ">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText3 " />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Deleted</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD ">
<CPNT_ID_DELETED/>
</td>
<td class="myTD ">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD ">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF; ">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:0px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr>
<td valign="top ">
<table align="left " class="column " style="width:300px ">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px; "> </td>
</tr>
<tr>
<td colspan="3 " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
<!-- end snippet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align="center" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px; height:20px;" height="20"> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
You can include the below CSS for body so it will align content to left
body{
float:left;
}
You can see the sample outpul here
Example And Implementation
I have a table with two rows of headings. I want to set the widths of some of the columns in the second row. I set up a Codepen to test it out. I find that if I remove the first row of headings, it takes the column widths I've specified without a problem. But with the first row of headings, it ignores the widths of the columns in the second row. :(
Please note that I have div's within the th's so I can style the borders.
Here's the Code:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px;
}
.title-22 {
width: 100px;
}
.title-24 {
width: 100px;
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th colSpan="1" class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-23">
<div class="div-title">Value</div>
</th>
<th colSpan="1" class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
So just to clarify: the question is how to make the Field columns fixed width, while leaving the Value columns to find their own level.
Thank you.
I can't quite understand why and how table lay-outs are calculated, because the algorythm seems pretty complex.
However, you can achieve the desired lay-out by using a good ol' <colgroup>.
There's some not-too-hard to digest info about how to use them in the HTML4 spec | Calculating column width. Note that this also holds true for the new spec (col and colgroup are not deprecated).
Stick this in between <table> and <thead> in your fiddle:
<colgroup>
<col>
<col width="150">
<col>
<col width="150">
<col>
</colgroup>
DEMO working:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px; /* Wont be applied */
}
.title-22 {
width: 100px; /* Wont be applied */
}
.title-24 {
width: 100px; /* Wont be applied */
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<colgroup>
<col width="40">
<col width="100">
<col>
<col width="100">
<col>
</colgroup>
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-23">
<div class="div-title">Value</div>
</th>
<th class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>