Question

出于某种原因，我无法在表格中获得 td 100％，将文本作为中心对齐。

如何制作<td class="order-details">全宽，所以它填满了600px的表格呢？

JSFIDDLE：https://jsfiddle.net/61s1cdyo/1/

CODE：

<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
  <tr class="details">
      <td align="center">
      <table  class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px; display: block;">
        <tr align="center" class="header">
              <td class="order-details">
                    <h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
                </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

假设您要保持max-width：600px，则需要从内部表中删除display：block以使其像表一样。

<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
  <tr class="details">
      <td align="center">
      <table  class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px;">
        <tr align="center" class="header">
              <td class="order-details">
                    <h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
                </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这是Fiddle

Answer 2

嵌套表有一个max-width: 600px内联设置。如果你删除它，那就是100％宽：

https://jsfiddle.net/b594a5d5/1/

HTML表格不是全宽td

2 个答案: