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/
Related
I am working on a HTML email newsletter. I have the layout split up via various tables and inline CSS. If you visit https://heathology.github.io/email-newsletter/, you can see a live demo of my newsletter.
There is an image that says Fright Night and it is column 1 of two-columns. I would like to center the image vertically next to the content in column 2. I cannot get the image to bump down.
Below, you will see my css code:
/* two columns */
.two-columns.last {
padding: 15px 0;
}
.two-columns .padding {
padding: 20px;
}
.two-columns .content {
font-size: 15px;
line-height: 20px;
text-align: left;
}
.button {
background-color: #ffffff;
color: #171a1b;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
.button-dark {
background-color: #171a1b;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
In the HTML below, you can see how I have arranged it via tables:
<!-- TWO COLUMN SECTION -->
<tr>
<td style="background-color: #26292b; color: #ffffff;">
<table width="100%">
<tr>
<td class="two-columns last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p style="font-weight: bold; font-size: 18px;">Fright Night</p>
<p style="padding-bottom: 16px;">Do you like chills and fright? Then, join St. Auggies' youth at Frontier City's Fright Night on Friday, October 28 from
6:00pm-10:00pm. Tickets are $42.99/per person. Open to youth and adults 12 & up.</p>
Sign Up
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Are there any recommendations? If need be, you can see the full code here.
change in css style for .two-columns .column
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: middle;
text-align: center;
I am trying to define a weekly calendar, have a table with seven columns (one per day) and 24 rows (one per half an hour):
.cal-week {
border-collapse: collapse;
}
.cal-week-day {
width: 14%;
}
.cal-week-hour > td {
border: solid 1px #d8d8d8;
height: 2.2em;
position: relative;
}
.cal-week-hour > td > div {
position: absolute;
top: 0px;
z-index: 5;
width: 100%;
}
.item {
background-color: #494C4F;
color: #f4f4f4;
border: solid 1px #c8c8c8;
}
.item > div {
white-space: nowrap;
}
<table class="cal-week" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th class="cal-week-day">
monday
</th>
<th class="cal-week-day">
tuesday
</th>
<th class="cal-week-day">
wednesday
</th>
</tr>
<tr class="cal-week-hour">
<td>
<div/>
</td>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr class="cal-week-hour">
<td>
<div/>
</td>
<td>
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="item" width="33.333333333333336%" >
<div>a long description</div>
</td>
<td class="item" width="33.333333333333336%" >
<div>normal desc</div>
</td>
<td class="item" width="33.333333333333336%" >
<div>short</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div/>
</td>
</tr>
<tr class="cal-week-hour">
<td>
<div/>
</td>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr class="cal-week-hour">
<td>
<div/>
</td>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr class="cal-week-hour">
<td>
<div/>
</td>
<td>
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="item">
<div>asdsad</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div/>
</td>
</tr>
</tbody>
</table>
I am using React, the percentage of the tds of the inner tables are calculated as 100 / numberOfItems, in this example since we have 3 items -> 33.333333%. The problem is that the divs can be wider than the tds and as you can see in the fiddler they span over the next column.
The desired output is the following:
In fact, I have to draw n boxes which have to fit the parent (td) width, which in this case is dynamic. Furthermore, it should be responsive, so I cannot use static widths.
Any hints how to achieve such a result?
You can make the .item class into an inline-block element which will fix the 33% width.
Also because the border is added after the 33% width, your item is a bit to wide (it will be 33% + 1px left-border + 1px-right border).
you should consider giving the .item class a box-sizing: border-box; so the border will be inside this 33% width.
After this you get your desired output. See fiddle: https://jsfiddle.net/d2burtaz/
I also changed your min-height from those td's from 141px to 41px so it looks more like the picture you added.
-- Can you give me an example using just divs? question by Emaborsa.
Ofcourse, I would just remove the inner table with all its table elements, also remove the empty div's. And change the <td>'s into <div>'s. The only thing I have added after this is a .w-100 class which I added to the outer div so the 33% width on the inner children works.
.cal-week {
border-collapse: collapse;
font-size: 14px;
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
.cal-week-top {
font-weight: normal;
text-align: left;
color: #444;
padding: 2px;
text-transform: uppercase;
}
.cal-week-day {
width: 14%;
}
.cal-week-day-link:hover {
cursor: pointer;
text-decoration: underline;
}
.cal-week-weeksel div {
width: 16px;
}
.cal-week-weeksel:hover {
cursor: pointer;
background-color: var(--hover-light);
}
.cal-week-time00 {
text-align: right;
border-right: solid 1px #d8d8d8);
border-left: solid 1px #d8d8d8;
padding: 1px 5px 2px 5px;
}
.cal-week-hour00 > td,
.cal-week-time {
border-top: solid 1px #d8d8d8;
border-bottom: dashed 1px #d8d8d8;
}
.cal-week-hour30 > td{
border-bottom: solid 1px #d8d8d8;
}
.cal-week-time30,
.cal-week-cell {
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
height: 2.2em;
}
.cal-week-cell {
position: relative;
}
.cal-week-cell > div {
position: absolute;
top: 0px;
z-index: 5;
width: 100%;
}
.cal-week-today {
background-color: var(--button-border-disabled);
}
.item {
background-color: #494C4F;
color: #f4f4f4;
padding: 1px 2px 2px 2px;
border: solid 1px #c8c8c8;
display: inline-block;
box-sizing: border-box;
}
.item a {
color: #f4f4f4;
}
.item a:hover {
text-decoration: underline;
}
.w-100{
width: 100%;
}
<table class="cal-week" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th class="cal-week-top cal-week-day">
<div class="cal-week-day-link">26. Dienstag</div>
</th>
<th class="cal-week-top cal-week-day">
<div class="cal-week-day-link">27. Mittwoch</div>
</th>
<th class="cal-week-top cal-week-day">
<div class="cal-week-day-link">28. Donnerstag</div>
</th>
</tr>
<tr class="cal-week-hour00">
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div/>
</td>
</tr>
<tr class="cal-week-hour30">
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div class="w-100">
<div class="item single" title="10:30 - 14:25 Titel (Beschreibung)" style="min-height: 41px; width: 33.333336%;">
Titel
<div>Beschreibung</div>
</div><div class="item single" title="10:30 - 14:25 Titel (Beschreibung)" style="min-height: 41px; width: 33.333336%;">
Titel
<div>Beschreibung</div>
</div><div class="item single" title="10:30 - 14:25 Titel (Beschreibung)" style="min-height: 41px; width: 33.333336%;">
Titel
<div>Beschreibung</div>
</div>
</div>
</td>
<td class="cal-week-cell">
<div/>
</td>
</tr>
<tr class="cal-week-hour00">
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div/>
</td>
</tr>
<tr class="cal-week-hour30">
<td class="cal-week-time30"/>
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div/>
</td>
</tr>
<tr class="cal-week-hour00">
<td class="cal-week-cell">
<div/>
</td>
<td class="cal-week-cell">
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="item single" title="12:26 - 13:26 sdsdsd (asdsad)" width="100%" style="min-height: 61px;">
<div>
<div>
sdsdsd
</div>
<div>asdsad</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="cal-week-cell">
<div/>
</td>
</tr>
</tbody>
</table>
I want to display records one by one in sequence, I do not know why the extra space appears between the records. Can anyone help me please?
{block name=head}
<style>
td {
border: none;
font-weight: bold;
font-size: 100%;
}
.h1 {
margin: 3px, 0px;
}
.content {
height: 270px;
border: 1px solid black;
font-size: 100%;
width: 80%;
margin: 0 auto;
border-top: none;
font-family: Times New Roman;
}
.footer {
height: 30px;
border: 1px solid black;
width: 80%;
margin: 0 auto;
font-family: Terminal;
}
.details-table {
border-collapse: collapse;
}
.details-table td {
border-bottom: 1px solid #666;
padding: 5px;
border-right: 1px solid #666;
}
.details-table td.no-right-border {
border-right: none;
}
.details-table td.no-bottom-border {
border-bottom: none;
}
</style>
{/block}
{block name=body}
<div class="footer">
<table align="center" width="80%">
<tr>
<td style="text-align:left;">Name : {$partyName}</td>
<td style="text-align:center;">Date : {$salesDate}</td>
<td style="text-align:right;">Fine : {$totFine|string_format:"%.3f"}</td>
</tr>
</table>
</div>
<div class="content">
<table align="center" width="100%" class="details-table">
<tr height="30">
<td>Item</td>
<td style="text-align:center;">Gross</td>
<td style="text-align:center;">Less</td>
<td style="text-align:center;">Net</td>
<td style="text-align:center;">Touch</td>
<td style="text-align:center;">Wastage</td>
<td style="text-align:center;">Fine</td>
</tr>
{section name="sec" loop=$dtArray}
<tr>
<td valign="top" class="no-bottom-border">{$dtArray[sec].itemId}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$hsnCode}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$fine}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$rate}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
</tr>
{/section}
</table>
</div>
{/block}
You have height:270px set on the <div class="content">, and height="100%" set on the <table>, and the table is an immediate child of that div, so it inherits the height. That's why you're seeing the extra space when there are only a couple of rows. Simply reset or remove either of the height value to fix that.
EDIT
In the other case, if you want to keep the height set on the table, and only have the empty space to display at the bottom, you can add an empty row and set it to height:100%.
.details-table {
height: 270px;
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
.details-table td {
border: 1px solid #666;
padding: 5px;
}
<table class="details-table">
<tr>
<td>Item</td>
<td>Gross</td>
<td>Less</td>
<td>Net</td>
<td>Touch</td>
<td>Wastage</td>
<td>Fine</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- insert empty row -->
<tr style="height:100%;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have three tables table1,table2,table3 all wrapped inside a table, while adding different size of contents to the tables each expands to different height , how to make all the three tables display at same height even after adding different size of content
HTML :
<div class="csdiv">
<table cellpadding="2" cellspacing="0">
<tr valign="top">
<td>
<table class="cstable" width="100%" height="265">
<tr height="35">
<th width="33%" nowrap>Table1</th>
</tr>
<tr>
<td valign="top" bgcolor="FFFFFF" width="275">
</td>
</tr>
</table>
</td>
<td>
<table class="cstable" width="100%" height="265">
<tr height="35">
<th nowrap width="34%" nowrap>Table2</th>
</tr>
<tr>
<td valign="top" bgcolor="FFFFFF" width="275">
</td>
</tr>
</table>
</td>
<td>
<table class="cstable" width="100%" height="265">
<tr height="35">
<th nowrap width="33%" nowrap>Table3</th>
</tr>
<tr>
<td valign="top" bgcolor="FFFFFF" width="275">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS:
.csdiv {
font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
font-size: 12px;
line-height: 1em;
}
.cstable {
border-collapse: collapse;
border-color: #666666;
border-style: solid;
border-width: 1px;
font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
font-size: 12px;
line-height: 1em;
}
.cstable th {
background-color: #A3C2FF;
border-collapse: collapse;
border-color: #666666;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1em;
text-align: left;
}
JSFIDDLE : DEMO
Your parent elements has no height set, so the table is taking height only equal to the content.To make it full height, add
html,body{
height:100%; /*give full height to document */
width:100%;
margin:0;
padding:0;
}
table{
height:100%; /* stretch table to parents height*/
}
demo
I have table cells with class=image to which I cannot seem to apply any CSS. Here is my markup (nested tables) where the first table shows an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="leftColumn">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td><asp:Literal runat="server" ID="t1r2c1" /></td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td><asp:Literal runat="server" ID="t1r2c3" /></td>
<td class="gray"><asp:Literal runat="server" ID="t1r2c4" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<tr>
<td>
<table class="cell" id="t3">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t4">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t5">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t6">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t7">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t8">
</table>
</td>
</tr>
<tr>
<td>
<table class="messages" id="t9">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is my CSS:
.outer
{
border: none;
margin-left: auto;
margin-right: auto;
}
.outer td
{
vertical-align: top;
}
.column
{
border: none;
}
#rightColumn table, #leftColumn table
{
width: 100%;
}
.cell
{
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 11pt;
}
.cell .image
{
padding: 0;
margin: 0;
height: 2px;
width: 7px;
}
.messages td
{
border-collapse: collapse;
border: 2px solid #FF0000;
text-align: left;
}
h1
{
text-align: center;
font-size: 150%;
}
h2
{
text-align: center;
}
th
{
height: 24px;
background-color: #2B60DE;
color: #FFFFFF;
}
.gray
{
background-color: #AAAAAA;
}
Nothing I do to .cell .image seems to be able to shrink the images below a certain size -- which is already much smaller than the actual images so I know some shrinking is already going on.
Any advice is appreciated.
Could be the line-height or font-size preventing the td to become smaller.
Try setting the tds of the row with the image to line-height: 0px and font-size: 0px
I put together a jsfiddle of your example at http://jsfiddle.net/9xLqY/. The styles are being applied just fine when I remove the ASP components:
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder>
</span>
So it must be one of these components that is forcing the cells to be larger than you want. You'll need to add styles for #s1 and #p1.