HTML表格未全宽TD

Question

For some reason I can not get the td with 100% inside the table and align the text as center .

How can I make the <td class="order-details"> full width, so it full the 600px of the table obove?

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

Assuming you want to keep the max-width: 600px, you need to remove the display: block from the inner table to make it act like a table.

<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>

Here's a Fiddle

Answer 2

There is a max-width: 600px inline setting for the nested table. If you erase that, it's 100% wide:

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