I am trying to get the below tags to be centered however they keep appearing on the left. This is for an email template hence the inline styles.
<tr align="center" style="display:inline-block;">
<td style="font-size: 18px; font-weight:bold; border-right: dotted 1px #9B989E; padding:5px;">*|SECTION|*</td>
<td style="font-size: 18px; font-weight:bold; border-right: dotted 1px #9B989E; padding:5px;"> *|ROW|*</td>
<td style="font-size: 18px; font-weight:bold; padding:5px;">*|SEAT|*</td>
</tr>
Related
I have a table where there should be a border only on certain sides of certain elements - i.e. everywhere except the bottom and left side of the td:first-child
Required Table - td:first-child no borders:
The problem: Small white spaces where borders don't come together between rows and columns (at corners)
Current result - white space:
This is the code.
table.total td {
padding-top: 5px;
padding-bottom: 5px;
line-height: 125%;
}
table.total td.totalleft {
padding-left: 15px;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table.total td.totalright {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
<table class="total" style="width: 100%;">
<tr>
<td colspan="3"> </td>
<td colspan="4" class="totalleft">${record.subtotal#label}</td>
<td align="right" colspan="2" class="totalright">${record.subtotal}</td>
</tr>
<tr>
<td colspan="3"> </td>
<td colspan="4" class="totalleft">Sales Tax</td>
<td align="right" colspan="2" class="totalright">${record.taxtotal}</td>
</tr>
<tr>
<td colspan="3"> </td>
<td colspan="4" class="totalleft">Freight</td>
<td align="right" colspan="2" class="totalright">${record.shippingcost}</td>
</tr>
<tr>
<td colspan="3"> </td>
<td colspan="4" class="totalleft">Total Invoice Amount</td>
<td align="right" colspan="2" class="totalright">${record.subtotal+record.taxtotal+record.shippingcost}</td>
</tr>
</table>
Things I've tried
Adding padding: 0; margin 0; under *, table, etc in CSS
Adding border-collapse: collapse, border-spacing: 0;
As a workaround, I've even tried "moving up" into the to remove the white corner using position: relative; top: -1px. But that just creates a white gap between the bottom row/cell and the border-bottom of the entire table
Thanks for any help!
How I can make the table use multiple lines on each row exceeded the max-width of that table
.table {
font-size: 12px;
border-bottom: 1px solid #dddddd;
color: #8d8d8d;
max-width: 400px;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
padding: 7px;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
background:#FFFFFF;
vertical-align:middle;
word-wrap:break-word;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
padding: 7px;
}
<pre>
<table id="TBLTBLDATA" border="1" cellpadding="0" cellspacing="0" class="table" style="position: relative;z-index: 100; width: 296px; height: 26px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none;font-size: 13px; ">
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">Data</td></tr>
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">123</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXX</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">0000000</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">57-41</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td></tr></table></pre>
I'll give you two solutions.
Statically created text in table cell
Your text in the TD Cell is given by the time you developed the website and not created automatically by , lets say an XML response. Then according to http://www.uwec.edu/help/html/tb-multiline.htm here is your answer:
When the text in a single table cell exceeds a few words, a line break (<BR>)
may improve the appearance and readability of the table. The line
break code allows data to be split into multiple lines. Place the line
break code <BR> within the text at the point(s) you want the line to
break. Notice in the examples below that the line break code can be
used in data cells as well as in headers.
Remember that the user of your document has final control over font
and size. Some line break codes, though appropriate with your
preference settings, may be inappropriate under other conditions.
Dynamically created text in table cell
Else if your text inside the cell comes dynamically and you don't know the actual size of it you can make the following:
Add a class to the table cell you want the effect to be placed. It is not necessary to do it although.
Add the following to style to the table column you want.. I hope it helped you.
text-wrap: normal;
word-wrap: break-word;
Just add word-wrap: break-word; to your td CSS.
If you'd like to use only one row and hide extra symbols, use overflow: hidden;
I have some HTML code. I have added two images: one alinged to the left and one to the right. Then it has two headings and an HTML table after that.
The problem is that I have use the following code to add the images to the document.
<img src="http://Path_To_Foler/Logo1.jpg" align="left" />
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />
<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>
<table class="table" >
<tr>
<td class="CellHeader">Date </td>
<td class="CellHeader">Time</td>
</tr>
<tr>
<td class="cell"><AssessmentDateFrmMSPAPARR /></td>
<td class="cell"><CurrentRcFrmMSPAPARR /></td>
</tr>
</table>
CSS
<style>
.CellHeader{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
color:#FFFFFF;
background-color:#151515;
border:1px solid black;
border-collapse:collapse;
}
.cell{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
border:1px solid black;
border-collapse:collapse;
}
.table{
width:100%;
border:1px solid black;
border-collapse:collapse;
}
.h1{
page-break-before: always;
text-align: center;
font-family: 'calibri';
font-size: 12pt;
}
<style>
Issue
Everything was working fine as expected. The problem started when I added the second image. Adding second image causes the table to be aligned right as well.
And when I take out the align:"right" atribute from the image element, the table is where it is supposed to be but the second image is pushed to the right which is kind of understandable.
How can I fix this?
Try replacing align="left" by style="float:left" and align="right" by style="float:right"
Then, add clear: both in .table{} in your CSS.
Here's the fiddle for what I'm working on:
http://jsfiddle.net/rSUhL/
I'm trying to replicate this image:
I'm pretty close. But for some reason, when I add border-radius to the table, it doesn't round the corners.
Also, is it possible to make it so the bottom-border doesn't touch the side of the boxes?
Here's the CSS:
table {
border-collapse: collapse;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 18px;
}
th, td {
border: 1px solid #d8d8d8;
border-collapse: collapse;
padding: 25px;
}
th {
text-align: right;
}
#blank {
border: none;
}
caption {
margin-bottom: 15px;
}
.blue {
background-color: #2a9ce0;
color: #fff;
border-bottom: 1px solid #55ace0;
}
.small-text {
font-size: 13px;
margin-top: -5px;
}
HTML:
<table>
<caption>Is Mastermind Talks for you?</caption>
<tr>
<th scope="row">Learning:</th>
<td>Tabloids and Newspapers</td>
<td class="blue">Books, blogs, seminars and peers</td>
</tr>
<tr>
<th scope="row">Focus:</th>
<td>Hourly or Salary</td>
<td class="blue">Cashflow, net worth and network</td>
</tr>
<tr>
<th scope="row">Financial Goals:</th>
<td>To survive until the next payday</td>
<td class="blue">To build passive income streams</td>
</tr>
<tr>
<th scope="row">Rate of Return:</th>
<td>Get Rich Quick</td>
<td class="blue">Long-term</td>
</tr>
<tr>
<th scope="row">Investments:</th>
<td>Liabilities: Cars, houses, etc</td>
<td class="blue">Assets: Yourself, business, etc</td>
</tr>
<tr>
<th scope="row">Values:</th>
<td>Currency</td>
<td class="blue">Legacy</td>
</tr>
<tfoot>
<td id="blank"></td>
<td><strong>Middle Class Mindset</strong><br /> <span class="small-text">(mastermind is not for you)</span></td>
<td class="blue"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>
</tfoot>
</table>
The border-radius declaration does not work with table border if the border-collapse is set to collapse. You have to define your borders on the td elements for border radius to work in this case.
Or, you can use border-collapse: separate; for border radius to work on the table itself.
Change the class name of
<td class="blue">Books, blogs, seminars and peers</td>
and
<td class="blue"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>
to
<td class="blue1">Books, blogs, seminars and peers</td>
<td class="blue2"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>
Then add the classes in CSS:
.blue1{
border-radius:8px 8px 0px 0px !important;
background-color: #2a9ce0;
color: #fff;
border-bottom: 1px solid #55ace0;
}
.blue2{
border-radius:0px 0px 8px 8px !important;
background-color: #2a9ce0;
color: #fff;
border-bottom: 1px solid #55ace0;
}
I am trying to get the following HTML to fully render in Outlook 2010 fake a button (since outlook doesn't render many css selectors). :
<table style="border: solid; background-color: red;">
<tbody >
<tr>
<td><a style = "text-decoration:none"href="www.google.com" ><span style="color: black;">here</span></a></td>
</tr>
</tbody>
</table>
Everything seems to work except the border lining does not render at all. From what I understand, outlook should render this (http://www.campaignmonitor.com/css/), but does not. Any help anyone can provide would be appreciated.
I usually just use shorthand css properties for borders like so:
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#fff" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #e9e9e9; border-radius: 5px; color: #000; display: block;">
<a href="http://www.EXAMPLE.com/" style="color: #000; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Awesome Email Button
</a>
</td>
</tr>
</table>
(Weirdly) for some reason shorthand border css properties render correctly in Outlook 07 and 2010
See http://jsfiddle.net/E6ZYz/
Reference link: http://emailwizardry.nightjar.com.au/2012/08/30/outlook-200710-borders-pain/