JSFiddle - React, Tailwind, and code Playground

HTML

<table id="t01">
    <thead>
    <tr>
        <th>類別</th>
        <th>標題</th>
        <th>日期</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>公告</td>
        <td class="title">
            TESTTESTTESTTESTTESTTESTTESTTESTTEST
        </td>
        <td>2011/11/26</td>
    </tr>
    </tbody>
</table>

<br />
<br />

<table id="t02">
    <thead>
    <tr>
        <th>類別</th>
        <th>標題</th>
        <th>日期</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>公告</td>
        <td class="title">
            TESTTESTTESTTESTTESTTESTTESTTESTTEST
        </td>
        <td>2011/11/26</td>
    </tr>
    </tbody>
</table>

CSS

table *{
    /* 加上格線看起來比較清楚 */
    border:1px solid #000;
    padding: 2px;
}

#t02{
    /* 防止表格被撐開 */
    table-layout: fixed;
    /* 強制換行 */
    word-wrap: break-word;
    /* IE 遇到長串英文強制斷行 */
    word-break: break-all;
}

#t02 .title{
    /* 設定最大寬度 */
    max-width: 200px;
    
    /* IE6 不支援 max-width, 需要用 expression */
    width: expression( document.body.clientWidth > 200 ? 200 : auto );
}