HTML table within form overflows

Question

Seeking help with tables within forms. Below is a stripped to the bones version of a page I'm working on in a Drupal 7 project. Can't figure out why the table overflows containing div. Any hints?

<form action="/whatever" method="post" accept-charset="UTF-8">
  <div>
    <table width="100%" word-wrap="break-word" table-layout="fixed">
      <tr>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
      </tr>
    </table>
  </div>
</form>

score 1 · Answer 1 · answered Dec 18 '17 at 20:11

<table width="100%" word-wrap="break-word" table-layout="fixed">

That's not how you inline CSS.

It should be:

<form action="/whatever" method="post" accept-charset="UTF-8">
  <div>
    <table style="width: 100%; word-wrap: break-word; table-layout: fixed;">
      <tr>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
        <td>zzzzzzz xzxzxzzxzxzxzzx</td>
      </tr>
    </table>
  </div>
</form>

HTML table within form overflows

1 Answers1