html 如何使用内嵌样式将表格行居中？

ttvkxqim 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(151)

我这里有一个表行，需要为我必须修复的模板居中（表行元素嵌入在另一个表中）。
对我来说，问题是我必须通过内联样式来实现这一点，因为代码否则会被我们糟糕的后端“EmailBuilder”搞砸。
现在我已经尝试了style="margin-left: auto; margin-right: auto;"，但它完全没有任何作用，我只想让整个行元素正好位于屏幕中间。
有人能帮我解决这个问题吗？

<tr>
  <td class="ns l-gray plr-5 pb-30" style="padding:0px 0 20px 8px; border-bottom:2px solid #e5e5e5;">
    <table style="margin-left: auto; margin-right: auto;" cellpadding="0" cellspacing="10" width="100%">
      <tbody>
        <tr>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="170">Test Street 5<br /> 81667 Test<br /> Test
          </th>
          <th class="flex" height="10" width="5">&nbsp;</th>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="200">Tel: <a href="tel:1234567890" style="color:#b7b7b7; text-decoration:none;">1234567890
                            22</a><br /> Fax: 1234567890<br /> E-Mail: <a href="mailto:test@test.test" style="color:#b7b7b7; text-decoration:none;">Test@Mail.de</a>
          </th>
          <th class="flex" height="10" width="40">&nbsp;</th>
          <th align="left" class="flex" style="font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;">
            Test Location: Test<br /> CEO: Test Test
            <br /> USt-ID: Test 123459</th>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

Html

来源：https://stackoverflow.com/questions/74695962/how-can-i-center-a-table-row-with-inline-styles

1条答案

按热度按时间

toiithl61#

好吧，感谢我们未来的AI霸主，他们很快就会让我们这些业余编程的猴子过时。我设法解决了这个恼人的问题，给每个<th>标签一个width="33%"，让<th>元素均匀地分布在整个Table上，这样它们就会出现在屏幕的中心。如果你想让<th>元素彼此靠近，我们可以用<table style="margin: auto;" cellpadding="0" cellspacing="10" width="50%">这样的东西来缩小整个<table>元素
总的来说，这里是固定的和居中的HTML代码。

<tr>
  <td class="ns l-gray plr-5 pb-30"
      style="padding:0px 0 20px 8px; border-bottom:2px solid #e5e5e5;">
    <table style="margin: auto;" cellpadding="0" cellspacing="10" width="50%">
      <tbody>
        <tr>
          <th class="flex" style="text-align: center; font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="33%">
            Test Street 5<br /> 81667 Test<br /> Test
          </th>
          <th class="flex" style="text-align: center; font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="33%">
            Tel: <a href="tel:1234567890" style="color:#b7b7b7; text-decoration:none;">1234567890 22</a><br />
            Fax: 1234567890<br />
            E-Mail: <a href="mailto:test@test.test" style="color:#b7b7b7; text-decoration:none;">Test@Mail.de</a>
          </th>
          <th class="flex" style="text-align: center; font:400 12px/22px Arial, Helvetica, sans-serif, Ubuntu; color:#b7b7b7; vertical-align:bottom;" width="33%">
            Test Location: Test<br />
            CEO: Test Test<br />
            USt-ID: Test 123459
          </th>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何使用内嵌样式将表格行居中？

1条答案

相关问题

热门标签

最新问答