英文:
Centering to cells in an html table
问题
如何修复使"I'm unsatisfied"和"Satisfied"居中显示，而不是显示"Satisfied"靠边的问题？
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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?
答案1
得分: 0
在满意和不满意的表格中，除了那一行外，所有行都只有一列。这导致“我满意”的列显示在其他列的右侧，从而被推到最右边。
您可以通过在只有一列的行中使用“colspan="2"”来解决这个问题。然后，行将变得等宽。
例如：
<table
cellpadding="0"
cellspacing="0"
border="0"
style="word-break: break-word;"
width="100%"
>
<tbody align="center">
<tr>
<td colspan="2" height="30px" bgcolor="#ede3db">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
<h1>我们重视您的意见。请评价您的体验。</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>我不满意</h1>
</td>
<td>
<h1>我满意</h1>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
<div class="inner" style="width:100%; max-width:600px;">
</div>
</td>
</tr>
</tbody>
</table>
英文:
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:
<table
cellpadding="0"
cellspacing="0"
border="0"
word-break: break-word;
width="100%"
>
<tbody align="center">
<tr>
<td colspan="2" height=30px bgcolor="#ede3db">
</td>
</tr>
<tr>
<td colspan="2" 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 colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
<div class="inner" style="width:100%; max-width:600px;">
</div>
</td>
</tr>
</tbody>
</table>
答案2
得分: 0
对齐可以通过调整tr的对齐方式以及调整某些行中的单元格数量来解决：
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;
}
<table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
<tbody align="center">
<tr>
<td colspan="2" height="30px" bgcolor="#ede3db">
</td>
</tr>
<tr>
<td colspan="2" 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="center">
<td>
<h1>I'm unsatisfied</h1>
</td>
<td>
<h1>I'm satisfied</h1>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
<div class="inner" style="width:100%; max-width:600px;"></div>
</td>
</tr>
</tbody>
</table>
英文:
The alignment can be tackled with adjustments to the tr alignment, and adjusting the number of cells in some of the rows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
<tbody align="center">
<tr>
<td colspan="2" height=30px bgcolor="#ede3db">
</td>
</tr>
<tr>
<td colspan="2" 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="center">
<td>
<h1>I'm unsatisfied</h1>
</td>
<td>
<h1>I'm satisfied</h1>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
<div class="inner" style="width:100%; max-width:600px;">
</div>
</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论