table-布局和中断词冲突？ (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

我偶然发现以下内容有效。更改：将宽度布局属性应用于 header-row (<th>) 而不是 tablebody-cell (<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 喜欢

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

table-布局和中断词冲突？ (HTML,CSS)

table-layout and break-word conflicting? (HTML,CSS)

html-table

css-tables