'Div breaking table in mail template magento
I need help regarding this because frankly I have been stuck trying to fix it for a while.
Magento transporter wraps the table in a <div> and the <div> element breaks my table and I cannot find anywhere why.
This is the code. Can anyone help?
<table role="presentation" cellpadding="0" cellspacing="0" width="" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > FOX </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
</td>
<td colspan=33% style="">
<? echo ?> L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%"style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table role="presentation" cellpadding="0" cellspacing="0" width="550" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> <? echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > <? echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
<div>
מחיר ₪<? echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=33% style="">
<? echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<? echo $k['reason'] ?>
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<? echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
Solution 1:[1]
There's a lot of issue with the formatting of your code that can cause table breaking. When you fix these, it should look this:
<table role="presentation" cellpadding="0" cellspacing="0" width=""
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> ????? ?????? ????</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> FOX</div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
</td>
<td colspan="33%" style="">
L ????
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
???
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%" style="">
<div>
:????? ?
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%" style="">
<div>
:???? ?????
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
???? ?????
</div>
</td>
</tr>
</tbody>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" width="550"
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> <?php echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> <?php echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
<div>
???? ?<?php echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="33%" style="">
<?php echo $k['sizeReceived'] ?> ????
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
???
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<?php echo $k['reason'] ?>
</div>
</td>
<td colspan="35%" style="">
<div>
:???? ?????
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<?php echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
???? ?????
</div>
</td>
</tr>
</tbody>
</table>
Can you please check this out?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Gerard de Visser |