表格佈局和分詞衝突？ （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>