调整跨度的内容

我有一个表与内容，我无法弄清楚如何调整表内跨度的内容。调整跨度的内容

下面是已经粘贴2个图像。第一个图像是实际结果和第二需要result.I认为可以解释这一切......

enter image description here

CODE：

<table width="100%" cellspacing="3" cellpadding="0" style="border: 1px solid black; border-collapse: collapse; font-family: arial; font-size: 12px;"> 
    <thead> 
     <tr style="background-color: #d3d3d3;"> 
      <td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="padding: 5px 0px 0px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Order ID: <span style="font-weight: normal;text-align">#YCKY141</span> 

      </td> 
      <td style="padding-left: 20px; font-weight: bold;">Email: <span style="font-weight: normal;">[email protected]</span></td> 
     </tr> 
     <tr> 
      <td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Date: <span style="font-weight: normal;">28/03/2014</span> 

      </td> 
      <td style="padding-left: 20px; font-weight: bold;">Telephone: <span style="font-weight: normal;">XXX-XXX-XXXX</span> 

      </td> 
     </tr> 
     <tr> 
      <td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Payment Method: <span style="font-weight: normal;">On Invoice</span> 
      </td> 
     </tr> 
     <tr> 
      <td style="padding: 0px 0px 5px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Shipping Method: <span style="font-weight: normal;">Royal Mail</span> 

      </td> 
      <td style="padding-left: 20px;"></td> 
     </tr> 
    </tbody> 
</table>

来源

2014-03-28 MarsOne

你为什么使用内联样式？帮自己一个忙，写一些css – andrew

我不行。这是电子邮件模板的一部分。我不能包含css文件... – MarsOne

很好的你提到@kittMedia之前花一些时间为你创造一个很好的解决方案！ – andrew

你必须适用于你的表的一点点变化。

看看Demo

HTML

<table width="100%" cellspacing="3" cellpadding="0" style="border: 1px solid black; border-collapse: collapse; font-family: arial; font-size: 12px;"> 
    <thead> 
     <tr style="background-color: #d3d3d3;"> 
      <td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="border-right-style: solid; border-right-color: #d3d3d3; border-width:1px"> 
       <table> 
        <tr> 
         <td style="padding: 5px 0px 0px 5px; font-weight: bold; ; width: 60%;">Order ID: 

         </td> 
         <td style="padding-left: 20px;"><span style="font-weight: normal; text-align">#YCKY141</span></td> 
        </tr> 
        <tr> 
         <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Date: 

         </td> 
         <td style="padding-left: 20px;"><span style="font-weight: normal;">28/03/2014</span></td> 
        </tr> 
        <tr> 
         <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">payment Method: 

         </td> 
         <td style="padding-left: 20px;"><span style="font-weight: normal;">OnInvoice</span></td> 
        </tr> 
        <tr> 
         <td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Shipping Method: 

         </td> 
         <td style="padding-left: 20px;"><span style="font-weight: normal;">Royal Mail</span></td> 
        </tr> 


       </table> 
      </td> 
      <td style="vertical-align:top"> 
       <table> 
        <tr> 
         <td>Email : 
         </td> 
         <td> 
          <span style="font-weight: normal;">[email protected]</span> 
         </td> 
        </tr> 
        <tr> 
         <td>Telephone: 
         </td> 
         <td> 
          <span style="font-weight: normal;">XXX-XXX-XXXX</span> 
         </td> 
        </tr> 

       </table> 
      </td> 
     </tr> 

    </tbody> 
</table>

来源

2014-03-28 13:56:26 SpiderCode

你只需要使用适当的表格布局：

<table> 
    <thead> 
     <tr> 
      <td colspan="4" class="headline">Order Details</td> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td class="first">Order ID:</td> 
      <td class="second">#YCKY141</td> 
      <td class="third"></td> 
      <td class="fourth"></td> 
     </tr> 
     <tr> 
      <td class="first">Date:</td> 
      <td class="second">2014-03-28</td> 
      <td class="third">Email</td> 
      <td class="fourth">[email protected]</td> 
     </tr> 
    </tbody> 
</table>

CSS：

body { 
    font-family: Arial; 
    font-size: 12px; 
} 

table { 
    border: 1px solid #000; 
    border-collapse: collapse; 
} 

.headline { 
    background-color: #d3d3d3; 
    font-weight: bold; 
    padding: 5px; 
} 

.first, 
.third { 
    font-weight: bold; 
    padding: 0 5px; 
    width: 20%; 
} 

.second, 
.fourth { 
    width: 30%; 
} 

.third { 
    border-left: 1px solid #d3d3d3; 
}

演示：http://jsfiddle.net/kZ7Hj/

来源

2014-03-28 13:48:00 KittMedia

环绕每个键（订单ID，日期，等）与display:inline-block和宽度的span。

例子：

<span style="display:inline-block;width:40%;">Order Id</span>

编辑：确保当你做试验，以删除内联样式。这将使维护和调试变得更容易。刚刚看到您对电子邮件模板的评论。我有一段时间没有在电子邮件客户端查看css支持，并且可能不支持display:inline-block。

来源

2014-03-28 13:49:09 jbarreiros

-1

一个额外的<td>元素替换<span>元素，并将其对齐。

来源

2014-03-28 14:08:21 brobken

我不知道如果这是你想要什么，但我申请：

<div style="width:200px; display:inline-block;">..</div>

在标签上，它似乎要对齐就好了。

在这里你可以找到一个例子：http://jsfiddle.net/LxD9N/12/

来源

2014-03-28 15:06:42 Aditzu

调整跨度的内容

回答

相关问题