Css 为什么不'；在JSF中使用h:dataTable显示动态数据时，特定于边界的属性似乎对行起作用？

考虑：

             <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>

css文件中注释掉的行（如果未注释）似乎没有效果，而outline属性显示了它的效果。为什么？由于我是CSS新手，我经常会错过一些东西。那么，如何将边框应用于特定行

---

这是由

边框塌陷引起的：分离属性-顺便说一下，这已经是大多数浏览器的默认值

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

该行为在中有规定，以下引用了其中的相关部分（重点）：

在此模型中，每个单元都有一个单独的边框。“边框间距”属性指定相邻单元格边框之间的距离。在该空间中，行、列、行组和列组背景是不可见的，从而允许表格背景显示出来行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）

换句话说，
、
、
和
不能设置任何
边框

如果设置
边框折叠：collapse，以便遵循CSS 2.1规范中的规则

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

这会改变所有表元素上边框的行为，这可能需要先在现有样式表上针对分隔边框模型进行一些调整，但毕竟更加灵活和直观

另一种方法是通过
元素设置边界

（Ab）使用
大纲
并非完全正确。此外，设置宽度/高度/边距/填充也会让您感到困惑，因为
轮廓基本上不占用任何空间。它就像一个绝对定位的边框，你必须用额外的边距或填充来补偿


与具体问题无关：请注意，这个问题不是JSF特有的。在这个问题的上下文中，JSF仅仅是一个HTML代码生成器。如果有一个“普通的”
.html
文件，其中有一个硬编码的
文件，其中有一些测试数据存根，则会出现完全相同的问题。如果您将JSF排除在上下文之外，而只提供一个最小的简单HTML代码片段来重现问题，CSS专家会更容易回答这个问题（您可以从JSF生成的HTML源代码开始，您可以通过右键单击，在webbrowser中查看源代码找到它）。
在简单CSS上下文中，将边框应用于表行
有点棘手（一般来说，边框不直接应用于表行
，而是应用于单个表单元格
）。@Tiny:那么，我将如何在此处将边框属性应用于h:列标记？@Tiny:不适用于问题的上下文。在阅读了你的个人资料后，我对包括你在内的受害者家属表示同情。愿上帝保佑你。我更关心的是
（因此，目前不是
），因为我开始使用素面。因此，我不能确定，但也许您可以使用标记名引用表单元格，例如
table，th，td{border:1px solid black；…}
。我认为，研究生成的HTML代码会更有趣，这会给你更多的洞察力。哦！谢谢你（最后的评论）！！！（顺便说一句，我忘记了一切，或者至少是试图忘记它）。那些解释性的演示（指链接）帮助了我很多。再次感谢您前来援助。
.order-table {
    border-collapse: collapse;
    ...
}