鬼問題探討 - 混合寬度的Table Layout

如果要開發一個Table裡面包含固定寬度、百分比寬度、自動寬度時，如下圖所示：

變更瀏覽器寬度：項目、作者寬度不變、標題與內容依據增加寬度進行調整：

HTML:

<table class="table1" border="1">
    <tr>
        <td class="column1">
            項目
        </td>
        <td class="column2">
            標題
        </td>
        <td class="column3">
            內容
        </td>
        <td class="column4">
            作者
        </td>
    </tr>
</table>

CSS:

<style>
    .table1 {
        width: 100%;
        table-layout: fixed;
    }
    .column1 {
        width: 60px;
        text-align: center;
        background-color: #ffcccc;
    }
    .column2 {
        width: 15%;
        overflow: hidden;
        white-space: nowrap;
        background-color: #ccffcc;
    }
    .column3 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        background-color: #ccccff;
    }
    .column4 {
        width: 120px;
        text-align: center;
        background-color: #cccccc;
    }
</style>