In a table that I've made with HTML and CSS, the first column is of a different height than the rest?
The top of the column is uneven with the others to the right of it.
Do run the code snippet below. The column I'm referring to is the "Date joined / Name / Email" block.
How can I fix this?
My current code looks like this:
<style>.table1 {
border-spacing: 1px;
}
.container {
border: 1px solid black;
margin: 10px;
padding: 10px;
align-content: center;
margin-left: auto;
margin-right: auto;
font-family: Calibri, sans-serif;
font-size: 15px;
}
</style>
<body>
<div class="container">
<h2 style="margin: 11px; height: 37px;"><u>Table Test:</u></h2>
<table class="table1" border="1" style="width:50%">
<tr style="background-color:#D6EAF8">
<td colspan="3" align="center" width="60%" style="height:30px"><b>Main</b></td>
<td colspan="1" align="center" width="10%"><b>Email</b></td>
</tr>
<tr>
<td rowspan="4" align="center">Date joined /<br> Name / Email</td>
</tr>
<tr>
<td align="center">05022022</td>
<td style="height:30px" align="center">Kimberly</td>
<td align="center">kimberlyk#gmail.com</td>
</tr>
<tr>
<td align="center">02152022</td>
<td style="height:30px" align="center">Robert</td>
<td align="center">robwayne#gmail.com</td>
</tr>
<tr>
<td align="center">12232021</td>
<td style="height:30px" align="center">Jessie</td>
<td align="center">jessieanderson#gmail.com</td>
</tr>
</table>
</div>
</body>
So you just had a little obfuscation in your colspans/rowspan attributes. Fixing the way you asked wouldn't align your column headers though and have just "Date Joined / Name / Email" centered on their own row though that wasn't very intuitive so I'm assuming you were maybe aiming for something closer to the example provided below. Cheers.
<style>.table1 {
border-spacing: 1px;
}
.container {
border: 1px solid black;
margin: 10px;
padding: 10px;
align-content: center;
margin-left: auto;
margin-right: auto;
font-family: Calibri, sans-serif;
font-size: 15px;
}
</style>
<body>
<div class="container">
<h2 style="margin: 11px; height: 37px;"><u>Table Test:</u></h2>
<table class="table1" border="1" style="width:50%">
<tr style="background-color:#D6EAF8">
<th colspan="2" align="center" width="60%" style="height:30px"><b>Main</b></th>
<th colspan="1" rowspan="2" align="center" width="10%"><b>Email</b></th>
</tr>
<tr>
<td align="center">Date joined</td>
<td align="center">Name</td>
</tr>
<tr>
<td align="center">05022022</td>
<td style="height:30px" align="center">Kimberly</td>
<td align="center">kimberlyk#gmail.com</td>
</tr>
<tr>
<td align="center">02152022</td>
<td style="height:30px" align="center">Robert</td>
<td align="center">robwayne#gmail.com</td>
</tr>
<tr>
<td align="center">12232021</td>
<td style="height:30px" align="center">Jessie</td>
<td align="center">jessieanderson#gmail.com</td>
</tr>
</table>
</div>
</body>
Related
I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working.
If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.
<table style="width: 100%">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76" bgcolor="#4a5666"> </td>
</tr>
</table>
Am I doing something wrong, and is there a way I can fix it?
Thanks
Coupled Rows
Check this solution out:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Credits to #TokPhobia for this answer (html table cell width for different rows)
tables have columns. The width of a column is constant. Use separate tables
table{
box-sizing:unset;
border-spacing:0;
}
<table style="width: 100%;">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76%" bgcolor="#4a5666"> </td>
</tr>
</table>
You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.
I really hate email html. So I have created a new confirmation email for our business and I need the white blocks in the picture below to be the same width. On desktop they look completely fine and match.
Without pasting the full template, this is how the code is structured with the css I am using:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And the picture of the issue on mobile:
I am pretty sure that because 600px isn't available on a device that size that it's seeing how with the content is, but I can't use media queries, so not really sure where to turn.
the layout displaying as per your content width in TD. the above HTML code you have give "first heading" and "second heading " as content so characters of second heading are more than first heading so width will not match.
solution is:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for mailers.
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
<tr>
<td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
https://jsfiddle.net/xmbsemje/
td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do.
One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.
The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.
Please note: I didn't fix all of your code, just change a couple to get you started
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; background-color: blue;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
</table>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
last td width 550px so not effect your width 80%;
so you can add width on span tag
I have a complicated set of table rows with colspans and rowspans all over the shop. All works fine except for the bottom row in Internet Explorer which forces it's height to be the same as the previous row, which is set to rowspan="2". How can I fix this?
Also, the layout needs to be a table because a PDF generator uses it and that requires tables. Ideally the HTML layout wouldn't change at all, but it can change if it needs to.
Below is the code. Look at it in Google Chrome to see how it should be displaying in IE.
.MhrPayslipDetail {
display: block;
font-family: sans-serif;
font-size: 16px;
padding: 20px 60px;
text-align: center;
}
.MhrPayslipDetail-payslip {
background-color: #fff;
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
.MhrPayslipDetail-label {
background-color: #c1c1c1;
border: 1px solid #c1c1c1;
border-radius: 5px;
font-weight: bold;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cell,
.MhrPayslipDetail-cellRight {
background-color: #fff;
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cellRight {
text-align: right;
}
.MhrPayslipDetail-list {
border: 0;
border-collapse: collapse;
width: 100%;
}
.MhrPayslipDetail-listCell,
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
border: 0;
padding: 1px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-listCellRight,
.MhrPayslipDetail-listCellHeaderRight {
border: 0;
padding: 1px;
text-align: right;
vertical-align: middle;
}
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
font-weight: bold;
width: 50%;
}
.MhrPayslipDetail-details {
font-size: .9em;
}
.MhrPayslipDetail-paymentsDetails,
.MhrPayslipDetail-deductionsDetails {
height: 21em;
vertical-align: top;
}
.MhrPayslipDetail-thisPeriodDetails,
.MhrPayslipDetail-yearToDateDetails {
height: 10em;
vertical-align: top;
}
<div class="MhrPayslipDetail">
<table class="MhrPayslipDetail-payslip">
<tbody>
<tr>
<td colspan="3" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-paymentsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">U/T</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Rate</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Test Basic Pay</td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-deductionsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">24.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-thisPeriodDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">27.60</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th colspan="2" class="MhrPayslipDetail-label">Year-to-date</th>
</tr>
<tr>
<td colspan="2" rowspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-yearToDateDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">622.08</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">713.73</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th class="MhrPayslipDetail-label">Payments</th>
<td class="MhrPayslipDetail-cellRight" colspan="2">200.00</td>
<th class="MhrPayslipDetail-label">Deductions</th>
<td class="MhrPayslipDetail-cellRight">49.40</td>
</tr>
</tbody>
</table>
</div>
UPDATE
Since submitting this question I have tried using sub-tables to separate out the columns, however I found that when I did that I wasn't able to get them to line up correctly due to border spacing and the PDF generator's lack of being able to use border-collapse:collapse;.
As an FYI, this is the PDF generator the system is using.