HTML two table row-size correlation? - html

I have two table class. Different padding, font-size, let just say everything is different. I put them next to each other.
Is there a way to force table2's rows to "complete" table1's rows, as per, take the exact height without me writing a number for height?
It would be convenient because padding and font are different, so if I want to make the two table look like they are one table, I have to count and calculate row height to make them fit.
table.right1 {
float: left;
vertical-align: top;
display: inline-box;
border-collapse: separate;
width: 1%;
margin: 0px;
}
table.right1 tr:nth-child(even) {
color: #FFB5F9;
border-color: #000;
background: #292929;
}
table.right1 tr:nth-child(odd) {
background: #292929;
border-color: #000;
color: #45ADFD;
}
table.sty {
background: #000;
border-collapse: separate;
box-shadow: inset 0 1px 0 #000;
margin: 0px;
text-align: center;
float: left;
display: inline-box;
width: 1%;
}
table.sty th {
background: #292929;
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #000;
padding: 1px 1px;
position: relative;
text-shadow: 0 1px 0 #000;
}
table.sty td {
border-right: 1px solid #000 border-left: 1px solid #e8e8e8;
border-top: 1px solid #616161;
border-bottom: 1px solid #292929;
padding: 6px 15px;
position: relative;
transition: all 300ms;
}
table.sty tr {
background: #292929;
}
table.sty tr:nth-child(odd) td {
background: #292929;
color: #C7C7C7;
}
table.sty tr:nth-child(even) {
background: #292929;
color: #fff;
}
<table class="right1" border="1" bgcolor="#292929" cellpadding="11" cellspacing="1" rowspan="1">
<tbody>
<tr height="400">
<td>
<div style="width: 100px;">
<center> 1 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 2 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 3 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 4 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 1 </center>
</div>
</td>
</tr>
<tr height="51">
<td>
<div style="width: 100px;">
<center> 5 </center>
</div>
</td>
</tr>
<!-------------- --------- ---->
</tbody>
</table>
<!---------------------------------------------------------------- ---->
<!--__________________________CONTENT______________________________ -->
<table class="sty">
<tbody>
<tr height="50">
<!--___________ 000 _____________________________ -->
<!--------------------------------HUN------------------------------------->
<td>
<div style="width: 100px;">
<center>
lorem ipsum
</br>
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; "> . </td>
<!---------------------------------ENG------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
<!---------------------------------GER------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
</tr>
<tr height="300">
<!--___________ 000 _____________________________ -->
<!--------------------------------HUN------------------------------------->
<td>
<div style="width: 100px;">
<center>
lorem ipsum
</br>
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; "> . </td>
<!---------------------------------ENG------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
<!---------------------------------GER------------------------------------>
<td>
<div style="width: 110px;">
<center>
lorem ipsum
</center>
</div>
</td>
<td style="background-color: #000 ; border-right: 1px solid #4C82C0; width=1 ;"> . </td>
</tr>

Related

Replicate Excel custom table using css + html

I want to replicate a table using CSS + HTML
So everything goes well until last part.
Table:
So I try:
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 40px;
display: block;
border: 1px solid #c4c7c7;
padding: 40px 40px 50px 40px;
position: relative;
z-index: 0;
}
.ship-table {
border-collapse: collapse;
}
.ship-table--title {
border-bottom: 3px solid;
border-top: 3px solid;
text-align: center;
background-color: #d3d3d3;
}
.ship-table--text_center {
text-align: center;
}
.ship-table--divider {
border-right: 3px solid;
border-left: 3px solid;
}
.ship-table--bottom {
border-bottom: 3px solid;
border-right: 3px solid;
}
.ship-table--image {
border-top: 3px solid;
border-right: 3px solid;
}
.ship-table--carrier {
background-color: #339933;
text-align: center;
}
.ship-table--due-box {
border: 3px solid;
}
.ship-table--dueDate {
background-color: #FFFF00;
}
.ship-table--dueDate_value {
font-size: 48px;
}
.ship-table--dueDate_field {
border: 3px solid;
border-color: red;
padding-bottom: 25px;
}
.ship-table--bol_value {
font-size: 28px;
}
<table class="ship-table">
<tbody>
<tr>
<td class="ship-table--title ship-table--divider">SHIP FROM</td>
<td class="ship-table--image" rowspan="2">pic here</td>
</tr>
<tr>
<td class="ship-table--divider">
{{ShipFromCompany}}
<br /> {{ShipFromAddressLineOne}}
<br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
<br /> {{ShipFromAttn}}
<br /> {{ShipFromPhone}}
</td>
</tr>
<tr>
<td class="ship-table--title ship-table--divider">SHIP TO</td>
<td class="ship-table--title ship-table--divider">Carrier Name:</td>
</tr>
<tr>
<td class="ship-table--divider">
{{ShipToCompany}}
<br /> {{ShipToAddressLineOne}}
<br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
<br /> {{ShipToAttn}}
<br /> {{ShipToPhone}}
</td>
<td class="ship-table--due-box">
<div class="ship-table--carrier ship-table--due-box ship-table--text_center">
{{ShipToCarrier}}
</div>
<div class="ship-table--dueDate ship-table--due-box ship-table--text_center">
DUE DATE:
</div>
<div class="ship-table--dueDate_value ship-table--dueDate_field ship-table--text_center">
{{ShipToDueDate}}
</div>
</td>
</tr>
<tr>
<td class="ship-table--title ship-table--divider">SHIPPER</td>
<td>
<div class="ship-table--title ship-table--divider">
BILL OF LADING NUMBER
</div>
<div class="ship-table--bol_value ship-table--text_center ship-table--divider">
{{BillOfLadingNumber}}
</div>
</td>
</tr>
<tr class="ship-table--bottom">
<td class="ship-table--divider">
{{ShipperCompany}}
<br /> {{ShipperAttn}}
<br /> {{ShipperAddressLineOne}}
<br /> {{ShipperAddressLineTwo}}
</td>
<td></td>
</tr>
</tbody>
</table>
How can I change nested borders to be part of the original colum, date be bigger than and the Bill Of ladding number at the bottom?
For nested borders I use border-colapse: colapse but it does not work.
Here is an easy solution. You can follow it.
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 40px;
display: block;
border: 1px solid #c4c7c7;
padding: 40px 40px 50px 40px;
position: relative;
z-index: 0;
}
.ship-table {
border-collapse: collapse;
width: 100%;
}
.ship-table tr, .ship-table td{
border: 1px solid #000;
}
.ship-table-table{
width: 100%;
}
.ship-table-table tr, .ship-table-table td{
border:0;
}
.ship-table--title {
border-bottom: 1px solid;
text-align: center;
background-color: #d3d3d3;
}
.ship-table--title-green{
border-top: 1px solid;
border-bottom: 1px solid;
text-align: center;
background-color: #339933;
}
.ship-table--title-yellow{
border-bottom: 1px solid;
text-align: center;
background-color: #FFFF00;
}
.ship-table--title-red{
border: 1px solid red !important;
text-align: center;
padding: 30px 0;
}
.ship-table--dueDate_value {
font-size: 48px;
text-align: center;
}
.ship-table--bol_value {
font-size: 28px;
text-align: center;
}
<div id="page">
<table class="ship-table" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title">
SHIP FROM
</th>
</tr>
<tr>
<td>
{{ShipFromCompany}}
<br /> {{ShipFromAddressLineOne}}
<br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
<br /> {{ShipFromAttn}}
<br /> {{ShipFromPhone}}
</td>
</tr>
</table>
</td>
<td>
pic here
</td>
</tr>
<tr>
<td valign="top">
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title">
SHIP TO
</th>
</tr>
<tr>
<td>
{{ShipToCompany}}
<br /> {{ShipToAddressLineOne}}
<br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
<br /> {{ShipToAttn}}
<br /> {{ShipToPhone}}
</td>
</tr>
</table>
</td>
<td valign="top" rowspan="2">
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title">
Carrier Name:
</th>
</tr>
<tr>
<td>
CASC
</td>
</tr>
</table>
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title-green">
{{ShipToCarrier}}
</th>
</tr>
<tr>
<th class="ship-table--title-yellow">
DUE DATE:
</th>
</tr>
<tr>
<td class="ship-table--title-red ship-table--dueDate_value">
{{ShipToDueDate}}
</td>
</tr>
</table>
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title">
BILL OF LADING NUMBER
</th>
</tr>
<tr>
<td class="ship-table--bol_value">
{{BillOfLadingNumber}}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table class="ship-table-table" cellpadding="0" cellspacing="0">
<tr>
<th class="ship-table--title">
SHIPPER
</th>
</tr>
<tr>
<td>
{{ShipperCompany}}
<br /> {{ShipperAttn}}
<br /> {{ShipperAddressLineOne}}
<br /> {{ShipperAddressLineTwo}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
There is no neat way to do this. You have to rely on css hacks to fix the borders. Also I couldn't fix bottom right corner cell
Here's a temporary fix to the nested border issue (except for the last column in the lastrow)
Changes have been highlighted with comments (Also note, I do not recommend this method, I am just giving you an idea of the nested border issue and tricks to overlap them)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 40px;
display: block;
border: 1px solid #c4c7c7;
padding: 40px 40px 50px 40px;
position: relative;
z-index: 0;
}
.ship-table {
border-collapse: collapse;
}
.ship-table--title {
border-bottom: 3px solid;
border-top: 3px solid;
text-align: center;
background-color: #d3d3d3;
}
.ship-table--text_center {
text-align: center;
}
.ship-table--divider {
border-right: 3px solid;
border-left: 3px solid;
}
.ship-table--bottom {
border-bottom: 3px solid;
border-right: 3px solid;
}
.ship-table--image {
border-top: 3px solid;
border-right: 3px solid;
}
.ship-table--carriership-table--carrier {
background-color: #339933;
text-align: center;
}
.ship-table--due-box {
border-right: 3px solid; /*changes */
}
.ship-table--carrier {
border-right:none; /* changes*/
}
.ship-table--dueDate {
background-color: #FFFF00;
border-right: none; /*changes*/
}
.ship-table--dueDate_value {
font-size: 48px;
/*changes*/
position: relative;
margin-left: -4px;
margin-right: -4px;
margin-bottom: -2px;
}
.ship-table--dueDate_field {
border: 3px solid;
border-color: red;
padding-bottom: 25px;
}
.ship-table--bol_value {
font-size: 28px; /*changes*/
border-left: none;
position: relative;
margin-right: -2px;
}
.table-border-fix { /* new class to fix the borders in bottom column*/
border: 3px solid;
position: relative;
margin-left: -4px;
margin-right: -2px;
border-top: none;
}
</style>
</head>
<body>
<table class="ship-table">
<tbody>
<tr>
<td class="ship-table--title ship-table--divider">SHIP FROM</td>
<td class="ship-table--image" rowspan="2">pic here</td>
</tr>
<tr>
<td class="ship-table--divider">
{{ShipFromCompany}}
<br /> {{ShipFromAddressLineOne}}
<br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}
<br /> {{ShipFromAttn}}
<br /> {{ShipFromPhone}}
</td>
</tr>
<tr>
<td class="ship-table--title ship-table--divider">SHIP TO</td>
<td class="ship-table--title ship-table--divider">Carrier Name:</td>
</tr>
<tr>
<td class="ship-table--divider">
{{ShipToCompany}}
<br /> {{ShipToAddressLineOne}}
<br /> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}
<br /> {{ShipToAttn}}
<br /> {{ShipToPhone}}
</td>
<td class="ship-table--due-box">
<div class="ship-table--carrier ship-table--due-box ship-table--text_center">
{{ShipToCarrier}}
</div>
<div class="ship-table--dueDate ship-table--due-box ship-table--text_center">
DUE DATE:
</div>
<div class="ship-table--dueDate_value ship-table--dueDate_field ship-table--text_center">
{{ShipToDueDate}}
</div>
</td>
</tr>
<tr>
<td class="ship-table--title ship-table--divider">SHIPPER</td>
<td>
<!-- introduced new class table-border-fix to below 2 divs-->
<div class="ship-table--title ship-table--divider table-border-fix">
BILL OF LADING NUMBER
</div>
<div class="ship-table--bol_value ship-table--text_center ship-table--divider">
{{BillOfLadingNumber}}
</div>
</td>
</tr>
<tr class="ship-table--bottom">
<td class="ship-table--divider">
{{ShipperCompany}}
<br /> {{ShipperAttn}}
<br /> {{ShipperAddressLineOne}}
<br /> {{ShipperAddressLineTwo}}
</td>
</body>
</html>
References: Nested divs: how can I get overlapping borders?

Email template not rendering correctly in Gmail Client Iphone

How to make email-templates with a fixed-width for Iphone? If a width is longer than viewport - reduce the scale.
Now the issue I am having seems to be possibly with email sizing within Gmail Client on iOS on the iPhone. Although this template seems to look ok in all clients, the result I am getting in Gmail Client on Iphone looks compressed:
Email template rendering in Android:
Email template rendering in IOS(Iphone):
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Performance Scorecard</title>
</head>
<body>
<table width="640" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Hi <span>{FirstName}</span>,</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Your Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td>
</tr>
<tr>
<td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width: 180px;">
<tr>
<td colspan="2" style="width: 100%; padding-bottom: 20px; padding-top: 3px; text-align: center;"><img src=cid:logoLR width="100"></td>
</tr>
<tr>
<td style="padding-right: 5px;"><img width="65" height="65" style="border-radius: 50%; overflow: hidden;" src=cid:{imgCId}></td>
<td>
<span style="font-size: 14px; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{TenantName}</span>
</td>
</tr>
<tr>
<td style="font-weight: bold; font-size: 24px; padding-top: 15px; text-align: center;">
<span>{AverageRating}</span>
</td>
<td style="padding-top: 15px;">
<table cellspacing="0" cellpadding="0" border="0" style="font-size: 14px;">
<tr>
<td style="text-align: right; padding-left: 7px;">{RatingsCount}</td>
<td style="padding-left: 5px;">Ratings</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 7px;">{ReviewsCount}</td>
<td style="padding-left: 5px;">Comments</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<table cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="text-align: center;"><img width="30" height="30" src=cid:{firstStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{secondStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{thirdStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fourthStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fifthStar}></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="490" align="left" valign="middle" style=" width: 495px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width: 100%;">
<tr>
<td>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px;">
<table cellspacing="0" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td></td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">{MonthAndYear}</td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">Since Go-Live</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Review Requests Sent</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Review Requests Responded</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Response Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRateAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Online Review Site Redirects</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Online Reviews Added</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFFF; padding: 3px 5px; font-size: 11px;">Conversion Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRateAddedAllTime}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{blockComments}
<!-- end main -->
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Please click on this link to view your complete scorecard.</td>
</tr>
</table>
</body>
</html>

Table borders are going out of bound on right side

I have made a Email template for order confirmation.
It has a table,the table layout is fine on regular devices but on the gmail application on Phone the table layout is being disturbed.
The table border is going out of bound on the right side.
Here is my code for the email template:
<div style="text-align: center; margin: 0, auto; padding: 10px;">
<a href="http://brightopaints.com/" target="_blank">
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png" alt="Brighto Paint" class="FollowBlockIcon" width="102" style="width: 102px; max-width: 102px;" />
</a>
</div>
<div style="max-width: 730px; background-color: #ebebeb; border-radius: 10px; text-align: center; margin: auto !important; padding-left: 24px; padding-right: 24px;">
<h1 style="color: #514f9e; padding: 15px; font-size: 48px; font-weight: 600;">THANK YOU!</h1>
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png" width="250" style="width: 250px; max-width: 250px;" />
<h2 style="color: #000000; padding-top: 25px; font-size: 28px; font-weight: 500;">Your order is on its way.</h2>
<h2 style="color: #000000; padding-top: 25px; font-size: 18px; font-weight: 500;">this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style="border: 1.2px solid black; margin-left: 30px; margin-right: 30px; margin-top: 40px;" />
<h2 style="color: #000000; padding-top: 12px; font-size: 36px; font-weight: 300;">shipping and billing details</h2>
<div style="border: 1px solid black; border-radius: 5px; margin: 24px; padding-left: 15px; padding-right: 15px;">
<table style="width: 100%; border-collapse: collapse; border-style: hidden; overflow-x: auto;">
<tbody>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Email</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_email."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Contact Number</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_number."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Address</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$complete_address."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Shade</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_shade_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Type/Packaging</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_type_packaging."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Quantity</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_quantity."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Order Message</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 36px; font-weight: 300; text-align: left !important;">Total :</h2>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 20px; font-weight: 300; text-align: left !important;">subtotal :</h2>
<h2 style="color: #000000; padding-top: 62px; padding-left: 22px; padding-right: 22px; padding-bottom: 62px; font-size: 15px; font-weight: 500; text-align: center !important;">
if anything doesn't look right, simply contact us at our <span style="color: #537bed; text-decoration: underline;">Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
I have tried to use overflow:hidden; but then my content is cut off.
Here is what I am getting:
Use table-layout:fixed; for table and for all td to word-wrap:break-word;
NOTE:
I have added the word-wrap:break-word; ONLY for email due to inline css elements so please do the same for all other td.
<div style='text-align: center;margin: 0,auto;padding: 10px;'>
<a href='http://brightopaints.com/' target='_blank'><img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png' alt='Brighto Paint' class='FollowBlockIcon' width='102' style='width:102px; max-width:102px;'></a>
</div>
<div style='max-width: 730px;background-color: #ebebeb;border-radius: 10px;text-align: center; margin: auto !important;padding-left: 24px;padding-right: 24px;'>
<h1 style='color: #514f9e;padding: 15px;font-size: 48px;font-weight: 600;'>THANK YOU!</h1>
<img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png' width='250' style='width:250px; max-width:250px' />
<h2 style='color: #000000;padding-top: 25px;font-size: 28px;font-weight: 500;'>Your order is on its way.</h2>
<h2 style='color: #000000;padding-top: 25px;font-size: 18px;font-weight: 500;'>this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style='border: 1.2px solid black;margin-left: 30px;margin-right: 30px;margin-top: 40px;'>
<h2 style='color: #000000;padding-top: 12px;font-size: 36px;font-weight: 300;'>shipping and billing details</h2>
<div style='border: 1px solid black;border-radius: 5px;margin: 24px;
padding-left: 15px;padding-right: 15px;'>
<table style='width: 100%;border-collapse: collapse;border-style: hidden;overflow-x:auto;table-layout:fixed;'>
<tbody>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Email</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px; word-wrap:break-word;'>dsfadsfasdfasdfsddsfadsfasdfasdfsdafasdfasdfadfadsfadsfasdfasdfsdafasdfasdfadfaafasdfasdfadfa#gmail.com</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Contact Number</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_number."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Address</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$complete_address."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Shade</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_shade_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Type/Packaging</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_type_packaging."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Quantity</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_quantity."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Order Message</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px; font-size: 36px;font-weight: 300; text-align: left !important;'>Total : </h2>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px;font-size: 20px;font-weight: 300;text-align: left !important;'>subtotal : </h2>
<h2 style='color: #000000;padding-top: 62px;padding-left: 22px;padding-right: 22px;padding-bottom: 62px;font-size: 15px;font-weight: 500;text-align: center !important;'>
if anything doesn't look right, simply contact us at our <span style='color: #537bed;text-decoration: underline;'>Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>

Show tooltip(in span) always top in table

Hello I have a table and I made a tooltip with CSS
its shows up when u hover mouse on <td>
here's my jsfiddle : www.jsfiddle.net/4qzurb5w/
How can I make this tooltip always shows up everything in table?
Get rid of this block, it is conflicting:
.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
opacity: 0.8;
}
It should work then.
I moved your opacity style to .tooltip .tooltiptext, see stack snippet.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
opacity: 0.8; /* <-- I added your opacity here */
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.div table {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 10px;
text-shadow: 1px 1px 0px #fff;
background: #eaebec;
border: #ccc 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
.div table caption {
font-weight: bold;
font-size: 11px;
}
.div td {
min-width: 100px;
text-align: center;
padding: 5px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.red {
background: #940000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.blue {
background: #1C2CFA !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.black {
background: #000000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.yellow {
background: #009999 !important;
color: Green !important;
text-shadow: 1px 1px 0px #000000;
}
.white {
background: #fafafa !important;
color: #666 !important;
}
.grey {
background: #808080 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.ariza {
background: #990000 !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.green {
background: #00941C !important;
color: White !important;
text-shadow: 1px 1px 0px #000000;
}
.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
/* opacity: 0.8; get rid of this */
}
.green a,
.blue a,
.red a,
.yellow a,
.black a {
display: block;
color: White;
text-decoration: none;
}
.yazitd {
width: 70px !important;
}
.sagtd {
width: 540px !important;
}
.tarihtd {
width: 160px !important;
}
.style3 {
width: 90px;
}
.style4 {
height: 19px;
}
.style5 {
width: 40px;
}
.style6 {
width: 40px;
height: 23px;
}
.style7 {
height: 23px;
}
<table>
<tbody>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 1 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="red tooltip">Daire No:1
<div><span class="tooltiptext">ALEX DE SOUZA<br>HASAN ALİ KALDIRIM<br>ALPER POTUK<br>RIDVAN DİLMEN<br></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:2
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="red tooltip">Daire No:3
<div><span class="tooltiptext">ALİ KOÇ<br></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:4
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 2 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip" style="font-weight: 400;">Daire No:5
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:6
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:7
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:8
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">KAT 3 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:9
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:10
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:11
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="green tooltip">Daire No:12
<div><span class="tooltiptext"></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Placing divs using float:left

Unfortunately float Left does not work
I searched but not found a solution. My intention is to place the last box in the 2. row. Where is my mistake? Please zoom to 80% in the preview if you use the button "Run code snippet"
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; clear: both; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
You had some clear: both; properties placed wrong, and a missing float: left; :)
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; float: left; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>