在HTML表格中居中单元格。

huangapple
go评论94阅读模式
英文:

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 -->

  1. h1,
  2. h2,
  3. h3 {
  4.   margin-top: 0;
  5.   margin-bottom: 0;
  6. }
  8. h1 {
  9.   font-size: 16px;
  10.   font-family: Arial
  11. }
  13. p {
  14.   margin-top: 5px;
  15.   margin-bottom: 5px;
  16. }
  18. .kustomer_rows_container {
  19.   max-width: 600px;
  20.   min-width: 320px;
  21. }
  23. .kustomer_social_anchor {
  24.   color: inherit;
  25. }
  27. .col-1 {
  28.   width: 8.3%;
  29. }
  31. .col-2 {
  32.   width: 16.6%;
  33. }
  35. .col-3 {
  36.   width: 25%;
  37. }
  39. .col-4 {
  40.   width: 33.3%;
  41. }
  43. .col-5 {
  44.   width: 41.6%;
  45. }
  47. .col-6 {
  48.   width: 50%;
  49. }
  51. .col-7 {
  52.   width: 58.3%;
  53. }
  55. .col-8 {
  56.   width: 66.6%;
  57. }
  59. .col-9 {
  60.   width: 75%;
  61. }
  63. .col-10 {
  64.   width: 83.3%;
  65. }
  67. .col-11 {
  68.   width: 91.6%;
  69. }
  71. .col-12 {
  72.   width: 100%;
  73. }
  75. .inner {
  76.   background-image: url(&#39;https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png&#39;);
  77.   background-position: center;
  78.   background-repeat: no-repeat;
  79.   background-size: cover;
  80.   height: 100px;
  81. }
  83. a {
  84.   text-decoration: none;
  85. }

<!-- language: lang-html -->

  1. &lt;body dir=&quot;ltr&quot; style=&quot;background-color: #f6f6f6; padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  2.   &lt;table role=&quot;presentation&quot; class=&quot;kustomer_rows_container&quot; style=&quot;table-layout: fixed; border-spacing: 0; border-collapse: collapse; word-break: break-word; mso-table-lspace: 0pt; mso-table-rspace: 0pt;&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;
  3.     align=&quot;center&quot;&gt;
  4.     &lt;tbody&gt;
  5.       &lt;tr&gt;
  6.         &lt;td&gt;
  7.           &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot; style=&quot;background-color: #FFF5F5; background-position: center; background-size: cover; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; &quot;&gt;
  8.             &lt;tbody&gt;
  9.               &lt;tr&gt;
  10.                 &lt;td&gt;
  11.                   &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;col-12&quot;&gt;
  12.                     &lt;tbody&gt;
  13.                       &lt;tr&gt;
  14.                         &lt;td&gt;
  15.                         &lt;/td&gt;
  16.                       &lt;/tr&gt;
  17.                     &lt;/tbody&gt;
  18.                   &lt;/table&gt;
  20.                 &lt;/td&gt;
  21.               &lt;/tr&gt;
  22.             &lt;/tbody&gt;
  23.           &lt;/table&gt;
  24.           &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=&quot;100%&quot; style=&quot;background-color: #ffffff; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; &quot;&gt;
  25.             &lt;tbody&gt;
  26.               &lt;tr&gt;
  27.                 &lt;td&gt;
  29.                   &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;col-12&quot;&gt;
  30.                     &lt;tbody&gt;
  31.                       &lt;tr&gt;
  32.                         &lt;td&gt;
  34.                           &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; word-break: break-word; width=&quot;100%&quot;&gt;
  35.                             &lt;tbody align=&quot;center&quot;&gt;
  36.                               &lt;tr&gt;
  37.                                 &lt;td style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  38.                                   &lt;img href=&quot;&quot; src=&quot;https://cdn.myka.com/digital-asset/banners/SiteLogo.svg&quot; /&gt;
  40.                                 &lt;/td&gt;
  41.                               &lt;/tr&gt;
  43.                             &lt;/tbody&gt;
  44.                           &lt;/table&gt;
  46.                   &lt;/table&gt;
  49.                   &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; word-break: break-word; width=&quot;100%&quot;&gt;
  50.                     &lt;tbody align=&quot;center&quot;&gt;
  51.                       &lt;tr&gt;
  52.                         &lt;td height=30px bgcolor=&quot;#ede3db&quot;&gt;
  53.                         &lt;/td&gt;
  54.                       &lt;/tr&gt;
  55.                       &lt;tr&gt;
  56.                         &lt;td style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  57.                           &lt;h1&gt;We value your opinion. Please rate your experience.&lt;/h1&gt;
  58.                           &lt;p&gt;[[sn.org.csat_body]]&lt;/p&gt;
  59.                           &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=1&quot;&gt;
  60.                             &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg&quot; /&gt;
  61.                           &lt;/a&gt;
  62.                           &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=2&quot;&gt;
  63.                             &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg&quot; /&gt;
  64.                           &lt;/a&gt;
  65.                           &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=3&quot;&gt;
  66.                             &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg&quot; /&gt;
  67.                           &lt;/a&gt;
  68.                           &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=4&quot;&gt;
  69.                             &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg&quot; /&gt;
  70.                           &lt;/a&gt;
  71.                           &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=5&quot;&gt;
  72.                             &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg&quot; /&gt;
  73.                           &lt;/a&gt;
  77.                           &lt;p&gt;&lt;a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&amp;sid={{ satisfaction.id }}&amp;resid={{ responseId }} target=&quot;_blank&quot;&gt;&lt;button&gt;[[sn.org.csat_button_label]]&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;
  78.                         &lt;/td&gt;
  79.                       &lt;/tr&gt;
  80.                       &lt;tr align=&quot;left&quot;&gt;
  81.                         &lt;td&gt;
  82.                           &lt;h1&gt;I&#39;m unsatisfied&lt;/h1&gt;
  83.                         &lt;/td&gt;
  84.                         &lt;td&gt;
  85.                           &lt;h1&gt;I&#39;m satisfied&lt;/h1&gt;
  86.                         &lt;/td&gt;
  87.                       &lt;/tr&gt;
  88.                       &lt;tr&gt;
  89.                         &lt;td style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  91.                           &lt;div class=&quot;inner&quot; style=&quot;width:100%; max-width:600px;&quot;&gt;
  93.                           &lt;/div&gt;
  95.                         &lt;/td&gt;
  96.                       &lt;/tr&gt;
  97.                     &lt;/tbody&gt;
  98.                   &lt;/table&gt;
  100.                   &lt;/td&gt;
  101.                   &lt;/tr&gt;
  102.                   &lt;/tbody&gt;
  103.           &lt;/table&gt;
  105.           &lt;/td&gt;
  106.           &lt;/tr&gt;
  107.           &lt;/tbody&gt;
  108.   &lt;/table&gt;
  111.   &lt;/td&gt;
  112.   &lt;/tr&gt;
  113.   &lt;/table&gt;
  114. &lt;/body&gt;

<!-- 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"”来解决这个问题。然后，行将变得等宽。

例如：

  1. <table
  2.   cellpadding="0" 
  3.   cellspacing="0" 
  4.   border="0"
  5.   style="word-break: break-word;"
  6.   width="100%"
  7.  >
  8.   <tbody align="center">
  9.     <tr>
  10.         <td colspan="2" height="30px" bgcolor="#ede3db">
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.       <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
  15.          <h1>我们重视您的意见。请评价您的体验。</h1>
  16.         <p>[[sn.org.csat_body]]</p>
  17.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=1">
  18.             <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg"/>
  19.         </a>
  20.           <a href="https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=2">
  21.             <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg"/>
  22.         </a>
  23.           <a href="https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=3">
  24.             <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg"/>
  25.         </a>
  26.           <a href="https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=4">
  27.             <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg"/>
  28.         </a>
  29.           <a href="https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=5">
  30.             <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg"/>
  31.         </a>
  32.                    
  33.         <p><a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&amp;sid={{ satisfaction.id }}&amp;resid={{ responseId }} target="_blank"><button>[[sn.org.csat_button_label]]</button></a></p>
  34.       </td>
  35.     </tr>
  36.     <tr align="left">
  37.         <td>
  38.             <h1>我不满意</h1>
  39.         </td>
  40.         <td>
  41.             <h1>我满意</h1>
  42.         </td>
  43.     </tr>
  44.     <tr>
  45.       <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
  46.         
  47.         <div class="inner" style="width:100%; max-width:600px;">
  48.     
  49.         </div>
  50.         
  51.       </td>
  52.     </tr>
  53.   </tbody>
  54. </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:

  1. &lt;table
  2. cellpadding=&quot;0&quot; 
  3. cellspacing=&quot;0&quot; 
  4. border=&quot;0&quot;
  5. word-break: break-word;
  6. width=&quot;100%&quot;
  7. &gt;
  8. &lt;tbody align=&quot;center&quot;&gt;
  9. &lt;tr&gt;
  10. &lt;td colspan=&quot;2&quot; height=30px bgcolor=&quot;#ede3db&quot;&gt;
  11. &lt;/td&gt;
  12. &lt;/tr&gt;
  13. &lt;tr&gt;
  14. &lt;td colspan=&quot;2&quot; style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  15. &lt;h1&gt;We value your opinion. Please rate your experience.&lt;/h1&gt;
  16. &lt;p&gt;[[sn.org.csat_body]]&lt;/p&gt;
  17. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=1&quot;&gt;
  18. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg&quot;/&gt;
  19. &lt;/a&gt;
  20. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=2&quot;&gt;
  21. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg&quot;/&gt;
  22. &lt;/a&gt;
  23. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=3&quot;&gt;
  24. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg&quot;/&gt;
  25. &lt;/a&gt;
  26. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=4&quot;&gt;
  27. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg&quot;/&gt;
  28. &lt;/a&gt;
  29. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=5&quot;&gt;
  30. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg&quot;/&gt;
  31. &lt;/a&gt;
  32. &lt;p&gt;&lt;a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&amp;sid={{ satisfaction.id }}&amp;resid={{ responseId }} target=&quot;_blank&quot;&gt;&lt;button&gt;[[sn.org.csat_button_label]]&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;
  33. &lt;/td&gt;
  34. &lt;/tr&gt;
  35. &lt;tr align=&quot;left&quot;&gt;
  36. &lt;td&gt;
  37. &lt;h1&gt;I&#39;m unsatisfied&lt;/h1&gt;
  38. &lt;/td&gt;
  39. &lt;td&gt;
  40. &lt;h1&gt;I&#39;m satisfied&lt;/h1&gt;
  41. &lt;/td&gt;
  42. &lt;/tr&gt;
  43. &lt;tr&gt;
  44. &lt;td colspan=&quot;2&quot; style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  45. &lt;div class=&quot;inner&quot; style=&quot;width:100%; max-width:600px;&quot;&gt;
  46. &lt;/div&gt;
  47. &lt;/td&gt;
  48. &lt;/tr&gt;
  49. &lt;/tbody&gt;
  50. &lt;/table&gt;

答案2

得分: 0

对齐可以通过调整tr的对齐方式以及调整某些行中的单元格数量来解决：

  1. h1,
  2. h2,
  3. h3 {
  4.   margin-top: 0;
  5.   margin-bottom: 0;
  6. }
  8. h1 {
  9.   font-size: 16px;
  10.   font-family: Arial;
  11. }
  13. p {
  14.   margin-top: 5px;
  15.   margin-bottom: 5px;
  16. }
  18. .kustomer_rows_container {
  19.   max-width: 600px;
  20.   min-width: 320px;
  21. }
  23. .kustomer_social_anchor {
  24.   color: inherit;
  25. }
  27. .col-1 {
  28.   width: 8.3%;
  29. }
  31. .col-2 {
  32.   width: 16.6%;
  33. }
  35. .col-3 {
  36.   width: 25%;
  37. }
  39. .col-4 {
  40.   width: 33.3%;
  41. }
  43. .col-5 {
  44.   width: 41.6%;
  45. }
  47. .col-6 {
  48.   width: 50%;
  49. }
  51. .col-7 {
  52.   width: 58.3%;
  53. }
  55. .col-8 {
  56.   width: 66.6%;
  57. }
  59. .col-9 {
  60.   width: 75%;
  61. }
  63. .col-10 {
  64.   width: 83.3%;
  65. }
  67. .col-11 {
  68.   width: 91.6%;
  69. }
  71. .col-12 {
  72.   width: 100%;
  73. }
  75. .inner {
  76.   background-image: url('https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png');
  77.   background-position: center;
  78.   background-repeat: no-repeat;
  79.   background-size: cover;
  80.   height: 100px;
  81. }
  83. a {
  84.   text-decoration: none;
  85. }
  1. <table cellpadding="0" cellspacing="0" border="0" word-break: break-word; width="100%">
  2.   <tbody align="center">
  3.     <tr>
  4.       <td colspan="2" height="30px" bgcolor="#ede3db">
  5.       </td>
  6.     </tr>
  7.     <tr>
  8.       <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
  9.         <h1>We value your opinion. Please rate your experience.</h1>
  10.         <p>[[sn.org.csat_body]]</p>
  11.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=1">
  12.           <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg" />
  13.         </a>
  14.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=2">
  15.           <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg" />
  16.         </a>
  17.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=3">
  18.           <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg" />
  19.         </a>
  20.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=4">
  21.           <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg" />
  22.         </a>
  23.         <a href="https://www.myka.com/article.aspx?p={{articleid}}&sid={{survey_id}}&resid={{response_id}}&rating=5">
  24.           <img width="70" src="https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg" />
  25.         </a>
  26.         <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>
  27.       </td>
  28.     </tr>
  29.     <tr align="center">
  30.       <td>
  31.         <h1>I'm unsatisfied</h1>
  32.       </td>
  33.       <td>
  34.         <h1>I'm satisfied</h1>
  35.       </td>
  36.     </tr>
  37.     <tr>
  38.       <td colspan="2" style="padding-top: 20px; padding-bottom: 20px;">
  39.         <div class="inner" style="width:100%; max-width:600px;"></div>
  40.       </td>
  41.     </tr>
  42.   </tbody>
  43. </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 -->

  1. h1,
  2. h2,
  3. h3 {
  4.   margin-top: 0;
  5.   margin-bottom: 0;
  6. }
  8. h1 {
  9.   font-size: 16px;
  10.   font-family: Arial
  11. }
  13. p {
  14.   margin-top: 5px;
  15.   margin-bottom: 5px;
  16. }
  18. .kustomer_rows_container {
  19.   max-width: 600px;
  20.   min-width: 320px;
  21. }
  23. .kustomer_social_anchor {
  24.   color: inherit;
  25. }
  27. .col-1 {
  28.   width: 8.3%;
  29. }
  31. .col-2 {
  32.   width: 16.6%;
  33. }
  35. .col-3 {
  36.   width: 25%;
  37. }
  39. .col-4 {
  40.   width: 33.3%;
  41. }
  43. .col-5 {
  44.   width: 41.6%;
  45. }
  47. .col-6 {
  48.   width: 50%;
  49. }
  51. .col-7 {
  52.   width: 58.3%;
  53. }
  55. .col-8 {
  56.   width: 66.6%;
  57. }
  59. .col-9 {
  60.   width: 75%;
  61. }
  63. .col-10 {
  64.   width: 83.3%;
  65. }
  67. .col-11 {
  68.   width: 91.6%;
  69. }
  71. .col-12 {
  72.   width: 100%;
  73. }
  75. .inner {
  76.   background-image: url(&#39;https://app.box.com/shared/static/vwkt0nu9iwc5o47mfiia5acft27da4rh.png&#39;);
  77.   background-position: center;
  78.   background-repeat: no-repeat;
  79.   background-size: cover;
  80.   height: 100px;
  81. }
  83. a {
  84.   text-decoration: none;
  85. }

<!-- language: lang-html -->

  1. &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; word-break: break-word; width=&quot;100%&quot;&gt;
  2. &lt;tbody align=&quot;center&quot;&gt;
  3. &lt;tr&gt;
  4. &lt;td colspan=&quot;2&quot; height=30px bgcolor=&quot;#ede3db&quot;&gt;
  5. &lt;/td&gt;
  6. &lt;/tr&gt;
  7. &lt;tr&gt;
  8. &lt;td colspan=&quot;2&quot; style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  9. &lt;h1&gt;We value your opinion. Please rate your experience.&lt;/h1&gt;
  10. &lt;p&gt;[[sn.org.csat_body]]&lt;/p&gt;
  11. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=1&quot;&gt;
  12. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_1_color.svg&quot; /&gt;
  13. &lt;/a&gt;
  14. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=2&quot;&gt;
  15. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_2_color.svg&quot; /&gt;
  16. &lt;/a&gt;
  17. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=3&quot;&gt;
  18. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_3_color.svg&quot; /&gt;
  19. &lt;/a&gt;
  20. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=4&quot;&gt;
  21. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_4_color.svg&quot; /&gt;
  22. &lt;/a&gt;
  23. &lt;a href=&quot;https://www.myka.com/article.aspx?p={{articleid}}&amp;sid={{survey_id}}&amp;resid={{response_id}}&amp;rating=5&quot;&gt;
  24. &lt;img width=&quot;70&quot; src=&quot;https://cdn.kustomerapp.com/satisfaction/emoji_5_color.svg&quot; /&gt;
  25. &lt;/a&gt;
  26. &lt;p&gt;&lt;a href={{conversation.custom.siteUrlStr}}article.aspx?p=100055&amp;sid={{ satisfaction.id }}&amp;resid={{ responseId }} target=&quot;_blank&quot;&gt;&lt;button&gt;[[sn.org.csat_button_label]]&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;
  27. &lt;/td&gt;
  28. &lt;/tr&gt;
  29. &lt;tr align=&quot;center&quot;&gt;
  30. &lt;td&gt;
  31. &lt;h1&gt;I&#39;m unsatisfied&lt;/h1&gt;
  32. &lt;/td&gt;
  33. &lt;td&gt;
  34. &lt;h1&gt;I&#39;m satisfied&lt;/h1&gt;
  35. &lt;/td&gt;
  36. &lt;/tr&gt;
  37. &lt;tr&gt;
  38. &lt;td colspan=&quot;2&quot; style=&quot;padding-top: 20px; padding-bottom: 20px;&quot;&gt;
  39. &lt;div class=&quot;inner&quot; style=&quot;width:100%; max-width:600px;&quot;&gt;
  40. &lt;/div&gt;
  41. &lt;/td&gt;
  42. &lt;/tr&gt;
  43. &lt;/tbody&gt;
  44. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月10日 16:49:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/76652144.html
  • html
  • html-table
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定