如何在 html table 中对齐一行中的数据单元格元素？

Question

我有如下所示的屏幕截图，我必须在 HTML/CSS 中复制它。

此刻，我可以在 fiddle 中用两个行元素 （在 fiddle 的底部）复制它 在边框内没有正确对齐。

问题陈述：

我想知道我必须在 内联样式 中做哪些更改，以便 2 行元素 正确地位于边框内。

HTML 的片段和我使用的内联样式代码是：

<table>
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;border-top: 4px solid #484848;border-bottom: 4px solid #484848;">
        <tr>
          <td style="padding-left:5%;width:70%;">poster - HST 13%</td>
          <td style="padding-bottom:1%;">1</td>
          <td style="padding-bottom:1%;"></td>
        </tr>
        <tr>
          <td style="padding-left:5%;width:70%;">deposit not included in the location</td>
          <td style="padding-bottom:1%;">1</td>
          <td style="padding-bottom:1%;"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

要解决此问题，请将 width: 12% 添加到第二个 <td>

<td style="padding-bottom:1%;  width: 12%;">1</td>

希望这对您有所帮助:)

<html>
<body>


<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mobile" style="margin: 0 auto;" align="center">


<tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;border-top: 2px solid #484848;padding-top: 2%;
    padding-bottom: 2%;">
          <tr >
            <td style="padding-left:8%;width:70%;padding-bottom:1%;">item</td>
            <td style="padding-bottom:1%;">qty</td>
   <td style="padding-bottom:1%;">price</td>
          </tr>  
     <tr>
            <td style="padding-left:5%;width:70%;padding-bottom:1%;">This is great tool</td>
            <td style="padding-bottom:1%;">2</td>
   <td style="padding-bottom:1%;">0</td>
          </tr>   
    <tr>
            <td style="padding-left:5%;width:70%;padding-bottom:1%;">deliver to my location</td>
            <td style="padding-bottom:1%;">1</td>
   <td style="padding-bottom:1%;"></td>
          </tr>  
    <tr>
            <td style="padding-left:5%;width:70%;padding-bottom:1%;">pick up from my location</td>
            <td style="padding-bottom:1%;">1</td>
   <td style="padding-bottom:1%;"></td>
          </tr> 
    </table>
</td>
</tr> 



  <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;border-top: 4px solid #484848;border-bottom: 4px solid #484848;">
      
       
    <tr>
            <td style="padding-left:5%;width:70%;">poster - HST 13%</td>
            <td style="padding-bottom:1%;">1</td>
   <td style="padding-bottom:1%;"></td>
          </tr>  
    <tr>
            <td style="padding-left:5%;width:70%;">deposit not included in the location</td>
            <td style="padding-bottom:1%;  width: 12%;">1</td>
   <td style="padding-bottom:1%;"></td>
          </tr> 
    </table>
</td>
</tr> 

</table>
</body>
</html>

如何在 html table 中对齐一行中的数据单元格元素？

How to align data cell elements in a row in html table?

html

css

html-table

inline-styles