使用CSS的JSF表列宽度不起作用

Question

我正在将样式应用于JSF 1.2表中的列宽，我的问题是我可以看到应用的样式但它似乎根本没有控制宽度。

这是stylesheet.css：

.col1 { background:#FF0000; width: 1000px; }
.col2 { width: 100px; }
.col3 { width: 50px; }
.col4 { width: 200px; }
.col5 { width: 100px; }
.col6 { width: 50px; }
.col7 { width: 200px; }
.col8 { width: 100px; }
.col9 { width: 50px; }
.col10 { width: 200px; }
.col11 { width: 100px; }

这是JSF xhtml：

    <h:dataTable id="pcTable" 
        styleClass="table-background"
        rowClasses="table-odd-row,table-even-row" cellpadding="3"
        columnClasses="col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11"
        headerClass="table-header" var="decorator">

在Chrome中，根据样式背景＃FF00000，列显示为红色，但宽度仍然很小，似乎只是自动调整内容，所以很明显它会拾取CSS。

如果我检查Chrome中的列元素，我可以看到：

.col1 {     背景：＃FF0000;     宽度：1000px; }

我错过了什么？