I'm currently working on designing an email ticket template that incorporates a small table for clients to easily view the subject and description of their ticket. The template was looking great until the table was inserted, causing a complete formatting disaster on the right side of the boxes! https://i.sstatic.net/dDCeu.png I've attempted to troubleshoot by removing certain parts of the table's CSS, suspecting that a specific property might be causing the issue, but it appears to be the table itself. Is there a way to resolve this or an alternative approach to consider?
The code snippets below may look oddly formatted here but display correctly in emails. I'm baffled by this as well, but trust me on this.
Working snippet:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
font-family: "Lucida Sans", sans-serif;
}
.box {
width: 75%;
border: 20px solid #bbbcbc;
margin: 0;
}
.case-number {
font-size: 20px;
background-color: #535659;
color: white;
width: 100%;
padding: 10px;
}
.date-opened {
font-size: 20px;
background-color: #bbbcbc;
color: #000000;
width: 100%;
padding: 10px;
}
.body {
font-size: 20px;
background-color: white;
color: black;
width: 100%;
padding: 10px;
}
.ttable th {
width: 20;
text-align: left;
background-color: #bbbcbc;
border: 1px solid #bbbcbc;
padding: 5px;
margin: 0;
}
.ttable td {
width: 80%;
border: 1px solid #bbbcbc;
padding: 5px;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="case-number">case number</div>
<div class="date-opened">date opened</div>
<div class="body">
this is where the body of the ticket will be.
<div class="ttable">
table here
</div>
</div>
</div>
</body>
</html>Problematic snippet:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
font-family: "Lucida Sans", sans-serif;
}
.box {
width: 75%;
border: 20px solid #bbbcbc;
margin: 0;
}
.case-number {
font-size: 20px;
background-color: #535659;
color: white;
width: 100%;
padding: 10px;
}
.date-opened {
font-size: 20px;
background-color: #bbbcbc;
color: #000000;
width: 100%;
padding: 10px;
}
.body {
font-size: 20px;
background-color: white;
color: black;
width: 100%;
padding: 10px;
}
.ttable th {
width: 20;
text-align: left;
background-color: #bbbcbc;
border: 1px solid #bbbcbc;
padding: 5px;
margin: 0;
}
.ttable td {
width: 80%;
border: 1px solid #bbbcbc;
padding: 5px;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="case-number">case number</div>
<div class="date-opened">date opened</div>
<div class="body">
this is where the body of the ticket will be.
<div class="ttable">
<table>
<tr>
<th>Subject</th>
<td>TICKET SUBJECT HERE</td>
</tr><tr>
<th>Description</th>
<td>TICKET DESCRIPTION HERE</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>