CODEWITHSUNDEEP
htmlcss
JGeer
JGeer

Reputation: 1852

HTML Table not full width td

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>

Upvotes: 1

Views: 1064

Answers (2)

delinear
delinear

Reputation: 2805

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

Upvotes: 2

Johannes
Johannes

Reputation: 67799

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/

Upvotes: 0

Related Questions