I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.
Related
I want to send mail with the below template from code. I am trying to hide and display the secondary table with the checkbox. I think I am stuck with the css selector. Is it possible to hide and show something with the checkbox. Important thing is I want to do it in only css , " NO JS " Here is the codepen edit link : https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100
.box {
display:none;
}
<-- Here is the issue I think when I tried to hide and display the table it is not working.-->
input[id='trigger']:checked table.box{
display:block;
}
table {
font-family: "Trebuchet MS";
margin: 8px;
}
tr:nth-child(odd) {
background-color: #f7f7f7;
}
.rightalign {
text-align: right;
width: 125px;
}
th {
background-color: #e84f32;
padding: 8px;
color: white;
border: 1px solid #e0e0e0;
}
td {
padding: 8px;
border: 1px solid #e0e0e0;
}
<table>
<thead>
<tr>
<th colspan="9" style="width:100%;" id="head">Client Wise AttendenceReport (2021/12/05)</th>
</tr>
<tr>
<th></th>
<th>SRNO</th>
<th>Customer</th>
<th>Organizations</th>
<th>Attendees (2021/12/04)</th>
<th>Attendees (2021/12/05)</th>
<th>Txns (2021/12/04)</th>
<th>Txns (2021/12/05)</th>
<th>Inclination (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="trigger">
</td>
<td>1</td>
<td>TSTS</td>
<td>33 (0%)</td>
<td>1605382</td>
<td>1605563 (0.01)</td>
<td>139313</td>
<td>20726</td>
<td>-85.12</td>
</tr>
<tr>
<td colspan="9">
<table class = "box">
<tr>
<td colspan="5" style="background-color: #e84f32; padding: 8px; color:white; text-align:center">Organisation Wise Transaction Report On 05-Dec- 2021</td>
</tr>
<tr>
<th>Slno</th>
<th>Organisation</th>
<th>Registered Users</th>
<th>Present Today</th>
<th>Percent(%)</th>
</tr>
<tr>
<td>1</td>
<td>TSTSATTENDANCE</td>
<td class="rightalign">294</td>
<td class="rightalign">3</td>
<td class="rightalign">1%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>GVK</td>
<td>2 (0%)</td>
<td>1329</td>
<td>1329 (0)</td>
<td>681</td>
<td>686</td>
<td>0.73</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>SIL</td>
<td>33 (0%)</td>
<td>202240</td>
<td>203042 (0.4)</td>
<td>111348</td>
<td>7519</td>
<td>-93.25</td>
</tr>
</tbody>
</table>
I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>
You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
I have created a table with two columns. While hovering mouse outside the table an extra column appears at the right side. I don't want that extra column to appear. What changes do I need to make here?
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide {
}
.expCode td:hover {
background-color: #ddd;
}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
<tr class="odd">
<td> Text</td>
<td><p>Text</p></td>
</tr>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This will solve your issue
<table class="expCode" border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</tr>
<tr class="odd">
<td> Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
</tbody>
</table>
Change your html code to something like this.
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0" ; style="width:100%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="odd">
<td> Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
It's actually not an extra column that appears, it's just the color of the outer table's cell that's being changed.
change .expCode td:hover { to .expCode table td:hover { for the rule to only affect the inner table.
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide {
}
.expCode table td:hover {
background-color: #ddd;
}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
<tr class="odd">
<td> Text</td>
<td><p>Text</p></td>
</tr>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I reduced my problem and fixed it. Here is my modified code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="gwt:property" content="locale=en_US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide
{
}
.expCode td:hover {background-color: #ddd;}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
</style>
</head>
<!-- comments only
-->
<body>
<table class="expCode" border="1" cellspacing="0" style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
</table>
</body>
</html>
After adding a background image to my table, the image is displaying over the table and the contents of the table are hidden. Why is this? HTML and CSS code is below:
.muscles_worked {
background-image: url(images/dumbbell.png);
border: 1px dashed black;
margin: 0 auto;
margin-top: 50px;
}
<table class="muscles_worked">
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
A better way might be to set the table in a div and set the background on that.
div.muscles_worked {
background-image: url('http://placekitten.com/700/500?image=13');
margin: 0 auto;
margin-top: 50px;
display: inline-block;
}
.muscles_worked > table {
border: 1px dashed black;
}
<div class="muscles_worked">
<table>
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
</div>
Hope it helps. Cheers!
HTML table border is not working after exporting the excel sheet. It is coming as no border excel sheet.The result after generate the excel is,
But my expected result is,
I want to split it into two different sections. But it is not working in excel sheet.
JSFIDDLE
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table {
border: 1px solid black;
}
th {
border: 1px solid black;
padding: 5px;
background-color: skyblue;
color: white;
}
td {
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table>
<tr>
<th>ColumnOne </th>
<th>ColumnTwo</th>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
</table>
</div>
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table
{
border: 1px solid black;
}
th
{
border: 1px solid black;
padding: 5px;
background-color:skyblue;
color: white;
}
td
{
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>
I didn't test this could you please try this
is it worked.
i modifiy this
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1" style="border-collapse: collapse;">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>