表单内的 HTML 表格溢出答案

【问题标题】：HTML table within form overflows表单内的 HTML 表格溢出
【发布时间】：2018-06-01 03:41:10
【问题描述】：

就表单中的表格寻求帮助。下面是我在 Drupal 7 项目中处理的页面的精简版。无法弄清楚为什么包含 div 的表溢出。有什么提示吗？

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

【问题讨论】：

标签： html forms html-table overflow

【解决方案1】：

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

这不是你内联 CSS 的方式。

应该是：

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

【讨论】：