时间戳

首页 > 解决方案 > 如何将一个表格单元格居中，使单元格比其他单元格少？

html - 如何将一个表格单元格居中，使单元格比其他单元格少？

问题描述

我尝试使用中心标签，我尝试使用对齐：中心。我尝试了一些东西，但没有什么能让我的 td 标签居中。我试图居中的 td 标签是最后一张图片，它粘在左侧。这也是实际页面的链接，因为我使用了内联 css，它可能更容易在检查器中分开。

<table>
  <tbody>
    <tr>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
    </tr>
    <tr>
      <td> <img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/38-Breckenridge-2-6-6T-Naked-Brass_large.jpg?v=1539704926" alt="" width="613" height="258" /></td>
    </tr>
  </tbody>
</table>

标签： htmlcssshopify

解决方案

要使最后一行的单元格全宽（这样您就可以将其中的内容居中），您需要给它colspan="3".

<tr>
  <td colspan="3" style="text-align: center;">
    <a href> 
       <img  />
   </a>
 </td>

请注意区别：您不能将单元格连续居中。您只能将它跨越多个列并将其中的内容居中。

虽然上述方法可行，但我需要强调您不应该使用<table>元素进行布局这一事实。十多年前，它不再是一种可接受的技术。

相反，您应该使用网格、弹性框或块级元素。

推荐阅读