I'm generating HTML emails from Sql Server and some of the emails will contain a table with many, many rows. I'd like to implement frozen column headers, so that when scrolling the data (inside the email), the column header always remains visible. I've attempted many different solutions using css, to no avail. I understand Outlook won't recognize javascript - so I'm stuck with using css to do this - which I'm able to do in various web sites, but Outlook 2010 does not react the same way.
I understand the css engine in Outlook is really like going back to the days of 2001. Can anyone offer any suggestions on how to accomplish this. I'm only interested in Outlook functionality, as that is our only email vehicle.
I took a shot at using this code, which works in jsfiddle - but not in email:
<style type="text/css">
table, td {
text-align:center;
}
th {
font-weight:bold;
text-align:center;
}
table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table th, table td {
width: 160px;
}
#wrapper {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table thead {
position:fixed;
}
</style>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
Thanks so much for any help,
Paul
Unfortunately Outlook doesn't support CSS position or overflow, so doing this in CSS looks as though it is not possible.
Because you are targeting Outlook only, you could try messing with VML. That is mostly uncharted territory, so not sure if you can find something that works. Check out backgrounds.cm for an example of how VML can be applied to a html email. Let us know how it goes if you try that route.
Related
I'm trying to do something very simple: create a table with single line borders.
There are many articles saying how to do that, and almost all of them include something like
table {
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
}
Which works great.
But they all apply the styling universally to the td and th tags themselves, and therefore apply to all tables.
So I tried this
.bordered {
border-collapse: collapse;
border: 1px solid orange;
text-align: center;
color: blue;
}
<table class=bordered>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I get a table with orange outer border, blue letters, and no internal borders.
I also tried
table.bordered, tr.bordered, td.bordered {
to no avail. Also putting "class=" on the tr tags didn't help.
I have learned that border properties are not inherited.
The DOM Inspector confirms that: just the color and centering are inherited by the td elements from the .bordered class.
My question is this:
How do I get borders on the cells without adding "class=" to every single td tag?
(A use case would if there are two tables on the page, and I want the borders styled differently for them).
Just take the css that works for all tables, and add table.bordered before all of them:
table.bordered {
border-collapse: collapse;
}
table.bordered td, table.bordered th {
border: 1px solid orange;
}
<table class="bordered">
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
<table>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
i am working on table structure html and i want to set my design in my stucture!!
i have get issue my table format width is set according to body content !
My question is how can i set width accrding to header ?
here is my code.
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
</table>
You can see my output:
enter image description here
Set the style on any of the td or th tags in the thead, and it will apply to all the cells in the column.
In the example below I've used an inline style, but that is not necessary. You could use CSS classes for that as well.
Also, you should replace the td's in the thead with th elements.
table td {
border: 1px black solid;
}
<table>
<thead>
<tr>
<td style="width: 50px">Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
You should set style width for each column, in other case it will resize to body size.
For example:
table {
border: solid 1px #000;
}
table td:nth-child(1) {
width: 200px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 100px;
border-right: solid 1px #ccc;
}
table td:nth-child(3) {
width: 150px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 50px;
}
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
I am struggling to put the cells containing { Lazy, Dog, Then, It } under the same header (with a colspan of 1)
I've tried creating div tags within my cell, creating 2 cells, and all the possible widths and colspan combinations I can think of.
Using div tags and CSS I can get Lazy and Dog under the header, but they are not individual cells.
<html>
<head>
<style>
table,td,tr,th{
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Quick</th>
<th>brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=2> prey to a lion </td>
</tr>
</table>
</body>
</html>
Thank you for any advice.
add colspan="2" to <th>brown fox</th>
you don't have to put div inside <td> to separate data
then edit your <td colspan=2> prey to a lion </td>
to <td colspan="3"> prey to a lion </td>
here is the working fiddle, hope it helped you
https://jsfiddle.net/LLa90017/1/
Easy as pie as follows:
table, td, tr, th {
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
<table>
<tr>
<th>Quick</th>
<th colspan="2">brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td>lazy</td>
<td>dog</td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=3> prey to a lion </td>
</tr>
</table>
I am trying to design the following table using html and css how do I proceed with it. Thank you in advance.
This solution will save you from having to use nested tables. The trick is that you really have four rows, not three, and make use of colspan and rowspan.
Note that you need to set a height for the td in order to ensure they are even.
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 30px;
}
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
you can try this one:
HTML
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
</table>
</td>
<td>Th</td>
</tr>
</table>
CSS
table
{
width:100%;
height:100px;
text-align:center;
border:2px solid gray;
border-collapse: collapse;
}
td
{
border:2px solid gray;
}
.container
{
width:100%;
}
.container .header
{
width:100%;
height:200px;
background:#5076BB;
}
.container .slider
{
width:100%;
height:500px;
background:#5076BB;
}
DEMO HERE
UPDATED DEMO HERE
Read the tutorial: http://www.w3schools.com/html/html_tables.asp
In particular read the part about the attributes rowspan="" and colspan=""
Example:
<td colspan="2">This table data will span two columns</td>
<td rowspan="2">This table data will span two rows</td>
I'm trying to reproduce the following table in HTML (retrieved from a PDF):
Notice how the paragraphs on the same cell are aligned with paragraphs in other cells.
Below I show to you the table in a snippet:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:50%">
<tr>
<td rowspan="2">
<p>Procedimentos</p>
</td>
<td colspan="2">
<p>Taxas (euros)</p>
</td>
</tr>
<tr>
<td>
<p>Obtenção</p>
</td>
<td>
<p>Renovação</p>
</td>
</tr>
<tr>
<td>
<p>1 —</p>
<p>2 —</p>
<p>3 —</p>
<p>4 — Produtor de semente de variedades de conservação</p>
<p>5 — Acondicionador de semente de variedades de conservação</p>
</td>
<td>
<p>...</p>
<p>...</p>
<p>...</p>
<p>200</p>
<p>150</p>
</td>
<td>
<p>...</p>
<p>...</p>
<p>...</p>
<p>30</p>
<p>15</p>
</td>
</tr>
</table>
If the paragraphs fit completely the cell without line break (remove "width" in <table>), everything is ok. However, when the table shrinks (as shown in the snippet), there is a line break and the paragraphs are no longer aligned (naturally).
I see two approaches here:
via CSS, which I don't know how.
via HTML, by subdividing the whole table such that each paragraph alignment becomes a new table row.
Option 2. is quite painful to program since I'm building these tables programatically (from PDF), which means an algorithm to subdivide the table.
Does anyone knows how to force the constraint that the paragraphs should stay aligned? Is that possible in CSS (with cross browser support)?
You need to make a <tr> for each row containing 3 <td> for each column so they stay aligned, <p> are not needed.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
vertical-align: middle;
}
td {border-top: none; border-bottom: none;}
th, td {padding: 12px 16px;}
<table style="width:50%">
<tr>
<th rowspan="2"> <!-- use th for border -->
Procedimentos
</th>
<th colspan="2">
Taxas (euros)
</th>
</tr>
<tr>
<th>
Obtenção
</th>
<th>
Renovação
</th>
</tr>
<tr>
<td> <!-- use td for no border -->
1 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
2 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
3 —
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
<tr>
<td>
4 — Produtor de semente de variedades de conservação
</td>
<td>
200
</td>
<td>
30
</td>
</tr>
<tr>
<td>
5 — Acondicionador de semente de variedades de conservação
</td>
<td>
150
</td>
<td>
15
</td>
</tr>
</table>
As #Heah writes, you need to put the data in separate rows. This is also better for accessibility, since it corresponds to the logical structure of the data and lets items be accessed as table cells, not as paragraphs inside a cell.
In addition, to reproduce the layout of the PDF file, you need to set borders in a more detailed manner in each direction and to reduce font size in header cells. The following does this relatively accurately, except that it does not produce the rows of dots (which are a separate issue, often asked at SO—no simple answer, but several possible approaches).
<style>
table {
width: 26em;
border: solid;
border-width: 3px 0;
border-collapse: collapse;
}
th, td {
vertical-align: bottom;
text-align: center;
border: solid 2px gray;
}
td {
border-top: none;
border-bottom: none;
}
td:first-child {
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
th {
padding: 0.3em 0.4em;
font-weight: normal;
vertical-align: middle;
font-size: 80%;
}
th:first-child, td:first-child {
border-left: none;
}
th:last-child, td:last-child {
border-right: none;
}
</style>
<table>
<thead>
<tr><th rowspan="2">Procedimentos
<th colspan="2">Taxas (euros)
<tr><th>Obtenção
<th>Renovação
</thead>
<tbody>
<tr>
<td>1 —
<td>…
<td>…
<tr>
<td>2 —
<td>…
<td>…
<tr>
<td>3 —
<td>…
<td>…
<tr>
<td>4 — Produtor de semente de variedades de conservação
<td>200
<td>30
<tr>
<td>5 — Acondicionador de semente de variedades de conservação
<td>150
<td>15
</tbody>
</table>