I am trying to make 2 cells centered At the moment lines up with one cell taking all the space and the second one just taking the space of the text.
h1,
h2,
h3 {
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 16px;
font-family: Arial
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
.kustomer_rows_container {
max-width: 600px;
min-width: 320px;
}
.kustomer_social_anchor {
color: inherit;
}
.col-1 {
width: 8.3%;
}
.col-2 {
width: 16.6%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.3%;
}
.col-5 {
width: 41.6%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.3%;
}
.col-8 {
width: 66.6%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.3%;
}
.col-11 {
width: 91.6%;
}
.col-12 {
width: 100%;
}
.inner {
background-image: url('https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100px;
}
a {
text-decoration: none;
}<body dir="ltr" style="background-color: #f6f6f6; padding-top: 20px; padding-bottom: 20px;">
<table role="presentation" class="kustomer_rows_container" style="table-layout: fixed; border-spacing: 0; border-collapse: collapse; word-break: break-word; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%" cellpadding="0" cellspacing="0" border="0"
align="center">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #FFF5F5; background-position: center; background-size: cover; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; ">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" class="col-12">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; ">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" class="col-12">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
<tbody align="center">
<tr>
<td style="padding-top: 20px; padding-bottom: 20px;">
<img href="" src="https://cdn.myka.com/digital-asset/banners/SiteLogo.svg" />
</td>
</tr>
</tbody>
</table>
</table>
<table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
<tbody align="center">
<tr>
<td height=30px bgcolor="#ede3db">
</td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px;">
<h1>We value your opinion. Please rate your experience.</h1>
<p>[[sn.org.csat_body]]</p>
<a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=1">
<img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg" />
</a>
<a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=2">
<img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg" />
</a>
<a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=3">
<img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg" />
</a>
<a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=4">
<img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg" />
</a>
<a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=5">
<img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg" />
</a>
<p><a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&sid={{ satisfaction.id }}&resid={{ responseId }} target="_blank"><button>[[sn.org.csat_button_label]]</button></a></p>
</td>
</tr>
<tr align="left">
<td>
<h1>I'm unsatisfied</h1>
</td>
<td>
<h1>I'm satisfied</h1>
</td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px;">
<div class="inner" style="width:100%; max-width:600px;">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>How can I fix it so the "I’m unsatisfied" and "sAtifsfied" are in the center and not displaying "Satisfied" All the way to the side?
2
Answers
In the table with satisfied and not satisfied you have only one column in all of the rows except that row. Resulting the column with "I’m satisfied" to be displayed to the right of the other columns, and thus pushed to the far right.
You can fix this by using colspan="2" on the td-elements in the rows where it’s only one column. Then the rows will be equally wide
I.e something like this:
The alignment can be tackled with adjustments to the
tralignment, and adjusting the number of cells in some of the rows: