Question

我试图将所有表格放在td中心。解决方案应该在outlook，Windows Live e.t.c等电子邮件客户端中运行良好。但它们垂直对齐。如何在div的中心对齐表格？

    <td align="center" style="text-align:center;width:100%;" width="100%">
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/facebook.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=" title=""><img alt="" src="http:///client/Content/images//social-links/linkedin.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://twitter.com/intent/tweet?text=: vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/twitter.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://twitter.com/intent/tweet?text=: vk.com">Tweet</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="https://plus.google.com/share?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/google-plus.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="https://plus.google.com/share?url=vk.com">+1</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://vk.com/share.php?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/vkontakte.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://vk.com/share.php?url=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
</td>

Answer 1

那是因为LcSalazar你不能不同意他，但我假设你正在为电子邮件制作布局，如果你想让展望显示你的期望，那么只有“桌面布局”方式因此table包含rows和columns
如果您希望table内容显示在一行中，则应将该行划分为您需要的columns多少，然后将内容放入单独的tables

中

<table>
    <tbody>  
        <tr>
           <td>
                <!-- table content 1 -->
           </td>
            <td>
                <!-- table content 2 -->
           </td>
            <td>
                <!-- table content 3 -->
           </td>
            <td>
                <!-- table content 4 -->
           </td>
            <td>
                <!-- table content 5 -->
           </td>
         </tr>
    </tbody>   
</table>

Answer 2

我不打算再考虑你为什么要重新考虑你的布局，所以你不需要嵌套表......也不应该使用表格进行布局...此外，为什么你不应该使用这么多的内联样式...我只是回答你的问题......

这就是：

默认情况下，table的作用类似于块元素，使用全宽并断开线。

要将它们并排放置，请将display属性更改为inline-table

＆＃13;

table table {
  display: inline-table;
}

＆＃13;

<table>
  <tr>
    <td align="center" style="text-align:center;width:100%;" width="100%">
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/facebook.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.facebook.com/sharer/sharer.php?u=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=" title=""><img alt="" src="http:///client/Content/images//social-links/linkedin.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://www.linkedin.com/shareArticle?url=vk.com&amp;mini=true&amp;title=">Share</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://twitter.com/intent/tweet?text=: vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/twitter.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://twitter.com/intent/tweet?text=: vk.com">Tweet</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="https://plus.google.com/share?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/google-plus.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="https://plus.google.com/share?url=vk.com">+1</a></td>
         </tr>
      </tbody>
   </table>
   <table align="center" class="cell-container" style="margin-left:auto;margin-right:auto;;margin:0 5px 0 0;text-align:left;background-color:#ffffff;border:none;;">
      <tbody>
         <tr>
            <td width="33" align="left" class="social-share-cell" style="padding:2px;"><a href="http://vk.com/share.php?url=vk.com" title=""><img alt="" src="http:///client/Content/images//social-links/vkontakte.png" width="33" height="33"></a></td>
            <td class="social-share-cell" style="padding:0 5px 0 3px;vertical-align: middle;" align="left"><a href="http://vk.com/share.php?url=vk.com">Share</a></td>
         </tr>
      </tbody>
   </table>
</td>
  </tr>
</table>

＆＃13;

Answer 3

添加此样式＆＃34; display：inline-table;＆＃34; for table删除text-align：left;来自餐桌风格。

如何在中心的td中对齐多个表

3 个答案: