表格布局和分词冲突？ （HTML，CSS）

Question

即使数据集中的单个词太长而无法容纳，我也希望列具有指定的宽度。但break-word似乎只在与table-layout: fixed结合使用时才起作用，而后者是唯一的我知道的方式使列宽具体值...

有没有解决此问题的方法？也许是一种JavaScript方式？

请参阅的jsfiddle here

table { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    width: 350px; 
    text-align: left; 
    vertical-align: top; 
    table-layout: fixed; 
    background-color: lightblue; 
    color: red; 
    font-Weight:400; 
    border-radius: 5px; 
} 
td { 
    color: black; 
} 
#colopmerking { 
    width: 200px; 
} 
#colbestanden { 
    width: 100px; 
} 
#coldoor { 
    width: 50px; 
} 

Answer 1

我发现有点意外的是以下工作。改变：适用宽度布局属性到标题行（<th>）代替上tablebody细胞（<td>）

table { 
    width: 350px; 
    text-align: left; 
    background-color: lightblue; 
    color: red; 
    font-Weight:400; 
    border-radius: 5px; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    table-layout: fixed; 
} 
td { 
    vertical-align: top; 
    color: black; 
} 
#thopmerking { 
    width: 200px; 
} 
#thbestanden { 
    width: 80px; 
} 
#thdoor { 
    width: 50px; 
} 

在表等

<table> 
    <thead> 
     <tr> 
      <th id="thopmerking">opmerking</th> 
      <th id="thbestanden">bestanden</th> 
      <th id="thdoor">door</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="colopmerking">ksjdhf</td> 
      <td id="colbestanden"></td> 
      <td id="coldoor">BEUN</td> 
     </tr>