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

Question

我有一个奇怪的问题。当单元格内的单词过长时，我希望具有固定宽度的表格单元格的中断字属性。打破工作正在进行，但单元格的宽度仍比我指定的大。这里是样式表：

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

我得到的结果是：

和我想的电子邮件列有宽度= 100px的。

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

Answer 1

您可以设置overflow: hidden，text-overflow: ellipsis;和max-width: 100px到th与长文本：

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