显示：表格单元格宽度问题

我为三列布局设置了固定的像素宽度值，并希望使用display:table-cell属性，以便列将始终对齐到具有最大内容的列div的高度。

我在没有问题之前就使用了此技术，但是现在看来似乎无法固定列宽，相反，如果div中的内容增加，它将使div变宽而不是变高，同时压缩了相邻单元格的宽度。显然，我正在使用table-cell的全部目的是阻止这种情况的发生，有人能看到阻止列宽正常工作的原因是什么？在JSFiddle中，宽度最初看起来是正确的，但是如果您在任何列中添加额外的文本，您会发现它没有响应，因为我需要它。

JSFiddle在这里

下面的html / css与上面的JSFiddle相同：

<div class="container">
<div class="fwcol">
    <div class="col">
        <div class="thirds">COLUMN1</div>
        <div class="thirdm">COLUMN2</div>
        <div class="thirds">COLUMN3</div>
    </div><!--col-->
</div><!--fwcol-->
</div><!--container-->

.container {
    margin: 0 auto;
    width: 966px;
    background:red;
    overflow:hidden;
}
.fwcol {
    float: left;
    width: 966px;
}
.col {
    width:966px;
    display:table;
    border-collapse:separate;
    border-spacing:20px;
}
.thirds, .thirdm {
    display: table-cell;
    padding: 20px;
    background: #FFF;
}
.thirds {
    width: 255px;
}
.thirdm {
    width: 256px;
}