Search code examples
htmlcssstylesheet

Table with align tag breaks body padding

The padding-bottom and the border properties applied to the document body stop working if I have a table with align="left" property:

This code will not add any padding at the bottom of the page in Chrome. If I only remove align="left" from the table then everything works.

Any idea how to add a padding or margin to the body using style property and leaving the content inside body unchanged?

<body style="padding-bottom:100px">
  <div style="border:2px solid red">
    <table align="left" style="background-color:silver;">
      <tbody>
        <tr>
          <td style="height:900px;">
            Hello
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Solution

  • The antique align="left" attribute causes the element to float: left. Override it with float: none; using a CSS attribute selector:

    body {
  padding-bottom: 100px;
}

[align="left"] {
  float: none;
}
    <div style="border:2px solid red">
  <table align="left" style="background-color:silver;">
    <tbody>
      <tr>
        <td style="height:900px;">
          Hello
        </td>
      </tr>
    </tbody>
  </table>
</div>