我无法调整表格单元格的宽度

Question

我有一个奇怪的问题。当单元格内的单词太长时，我想要具有break-word属性的表格单元格的固定宽度。打破工作正在进行，但单元格的宽度仍然比我指定的要大。以下是样式表的表格：

＆＃13 ;

＆＃13;

<table style="table-layout: fixed">
  <thead>
    <th style="width: 100px;"><span>EMAIL</span>
    </th>
    <th style="width: 100px;"><span>FULL NAME</span>
    </th>
    <th style="width: 100px;"><span>ORGANIZATION NAME</span>
    </th>
  </thead>
  <tbody>
    <td style="width: 100px;">
      <div style="max-width: 100px; word-wrap: break-word; ">
        abc
      </div>
    </td>
    <td style="width: 100px;">
      <div style="max-width: 100px; word-wrap: break-word; ">
        efg
      </div>
    </td>
    <td style="width: 100px;">
      <div style="max-width: 100px; word-wrap: break-word; ">
        lalalalallalalalalallalalalalalallalalalalallalalalalalalalallalalalla
      </div>
    </td>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我得到了结果：

我希望电子邮件列的宽度为100px。

感谢您的帮助。我不知道如何改变它。

Answer 1

您可以使用长文本将overflow: hidden，text-overflow: ellipsis;和max-width: 100px设置为th：

＆＃13;

＆＃13;

<table style="table-layout: fixed">
    <thead>
        <th style="width: 100px;"><span>EMAIL</span>

        </th>
        <th style="width: 100px;"><span>FULL NAME</span>

        </th>
        <th style="max-width: 100px;overflow: hidden;text-overflow: ellipsis;"><span>ORGANIZATION NAME</span>

        </th>
    </thead>
    <tbody>
        <td style="width: 100px;">
            <div style="max-width: 100px; word-wrap: break-word; ">lalalalallalalalalallalalalalalallalalalalallalalalalalalalallalalallalalalalallalalalalallalalalalalallalalalalallalalalalalalalallalalalla</div>
        </td>
        <td style="width: 100px;">
            <div style="max-width: 100px; word-wrap: break-word; ">efg</div>
        </td>
        <td style="width: 100px;">
            <div style="max-width: 100px; word-wrap: break-word; ">lalalalallalalalalallalalalalalallalalalalallalalalalalalalallalalalla</div>
        </td>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;