为什么在使用JSF中的h：dataTable显示动态数据时，特定于边界的属性似乎不适用于行？

Question

Consider:

             <h:dataTable value="#{orderBean.orderList}" var="o" 
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row" >

                <h:column>
                    <!-- column header -->
                    <f:facet name="header">Order No</f:facet>
                    <!-- row record -->
                    #{o.orderNo}
                </h:column>
                <h:column>
                    <f:facet name="header">Product Name</f:facet>
                    #{o.productName}
                </h:column>

                <h:column>
                    <f:facet name="header">Price</f:facet>
                    #{o.price}
                </h:column>

                <h:column>
                    <f:facet name="header">Quantity</f:facet>
                    #{o.qty}
                </h:column>
            </h:dataTable>

the included css file:

.order-table{   
    border-collapse:separate;
    border: 20px solid red ;

}

.order-table-header{
    text-align:center;
    background:none repeat scroll 0 0 #E5E5E5;
    border:5px solid #BBBBBB; 
    padding:16px;
}

.order-table-odd-row{
    text-align:center;

    background:none repeat scroll 0 0 blue;
    /* border:1px solid #BBBBBB; */
    /* border-top:1px solid red; */
    outline: 5px solid black;
}

.order-table-even-row{
    text-align:center;
    background:none repeat scroll 0 0 orange;

    /* border-left:5px solid pink; */
}

The commented out lines(if uncommented) in css file doesn't seems to have effect, while the outline attribute does show it effects. Why? Since I am new to CSS, I am ofcouse missing something. So, how will apply borders to specfic rows?

Answer 1

This is caused by border-collapse: separate; property on the parent table — which is by the way already the default value on most browsers.

.order-table {
    border-collapse: separate;
    ...
}

This behavior is specified in CSS 2.1 spec chapter 17.6.1 "The separated borders model" , of which a relevant part is cited below (emphasis mine):

In this model, each cell has an individual border. The 'border-spacing' property specifies the distance between the borders of adjoining cells. In this space, the row, column, row group, and column group backgrounds are invisible, allowing the table background to show through. Rows, columns, row groups, and column groups cannot have borders (ie, user agents must ignore the border properties for those elements).

In other words, <tr> , <col> , <tbody> and <colgroup> cannot have any border set.

It'll work if you set border-collapse: collapse; on the parent table so that instead the rules as per CSS 2.1 spec chapter 17.6.2 "The collapsed borders model" is followed.

.order-table {
    border-collapse: collapse;
    ...
}

This changes the behavior of the border on all table elements, which may need some tweaking first on existing stylesheets targeted at separated border model, but is after all much more flexible and intuitive.

An alternative is to set the borders via <td> element instead.

(Ab)using the outline isn't entirely right for the purpose. Besides, it confuses you as to setting width/height/margin/padding as the outline basically doesn't take up any space. It's like an absolutely positioned border, which you'd have to compensate with extra margin or padding.

---

Unrelated to the concrete problem: do note that this issue is not specific to JSF. In the context of this question, JSF is merely a HTML code generator. You'd have had exactly the same problem when having a "plain vanilla" .html file with a hardcoded <table><tr><td> with some test data stubbed. CSS experts would have answered this question easier if you have left JSF out of the context and instead presented a minimal plain HTML code snippet reproducing the problem (you can get started with the JSF-generated HTML source as you can find via rightclick, View Source in webbrowser).