我正在用h:panelGrid构建一个表。我将展示的示例是静态代码,但我的实际实现将在支持bean中,这可能与我将在此处提出的问题无关。 所以这就是我所拥有的:
(我无法发布图像!?!?我需要10个声望!)
某些单元格可能嵌套了具有多个文本项的h:panelGrid容器。这个例子是绿色圆圈的最大单元格。一些细胞具有更宽的含量,但是一些细胞具有多行含量。最后一些细胞可能根本没有内容。数据来自DB,因此在设计时不知道。
问题: 1.某些空单元格(无数据)必须具有适当的背景颜色。用红色圆圈(左边)是一个例子。我尝试使用一些spacer来嵌套另一个h:panelGrid,但没有运气:
<h:panelGrid columns="12" id="pg1" border="2">
<h:panelGrid id="pg2">
<h:outputText value="ID" id="ot1"/>
</h:panelGrid>
<h:panelGrid id="pg3">
<h:outputText value="Name" id="ot2"/>
</h:panelGrid>
<h:panelGrid id="pg4">
<h:outputText value="Whatifs" id="ot3"/>
</h:panelGrid>
<h:panelGrid id="pg5">
<h:outputText value="Birth Date" id="ot4" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg6">
<h:outputText value="Who" id="ot5" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg7">
<h:outputText value="Directed To" id="ot6" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg8">
<h:outputText value="Whatever" id="ot7" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg9">
<h:outputText value="Whatever One" id="ot8" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg10">
<h:outputText value="Whatever Five" id="ot9" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg11">
<h:outputText value="Whatever 1" id="ot10" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg12">
<h:outputText value="Payment Received" id="ot11" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg13">
<h:outputText value="Serious issues" id="ot12" style="text-wrap:avoid;"/>
</h:panelGrid>
<!-- 1st subject -->
<h:panelGrid id="pg1_1">
<af:link text="100000:123" id="l1"/>
</h:panelGrid>
<h:panelGrid id="pg1_2">
<h:outputText value="JANE A SMITH" id="ot1_2"/>
</h:panelGrid>
<h:panelGrid id="pg1_3">
<h:outputText value="01/01/2015" id="ot1_3"/>
</h:panelGrid>
<h:panelGrid id="pg1_4">
<h:outputText value="01/08/1980" id="ot1_4" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg1_5">
<h:outputText value="F" id="ot1_5" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg1_6" style="background-color:Yellow;">
<af:spacer width="10" height="10" id="s1_2" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg1_7">
<af:spacer width="10" height="10" id="s1_3" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg1_8">
<af:spacer width="10" height="10" id="s1_4" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg1_9">
<af:spacer width="10" height="10" id="s1_5" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg1_10">
<af:spacer width="10" height="10" id="s6" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg1_11">
<h:outputText value="Payment For Sure" id="ot1_11" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg1_12" style="background-color:#d6ffd6;">
<h:outputText value="Hardtime:Today" id="ot1_12" style="text-wrap:avoid;"/>
<h:outputText value="Hardtime:Tomorrow" id="ot1_13" style="text-wrap:avoid;"/>
</h:panelGrid>
<!-- 2nd subject -->
<h:panelGrid id="pg2_1">
<af:link text="200000:123" id="l2"/>
</h:panelGrid>
<h:panelGrid id="pg2_2">
<h:outputText value="JASON DOE SMITH" id="ot2_2"/>
</h:panelGrid>
<h:panelGrid id="pg2_3">
<h:outputText value="01/01/2015" id="ot2_3"/>
</h:panelGrid>
<h:panelGrid id="pg2_4">
<h:outputText value="01/03/1980" id="ot2_4" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg2_5">
<h:outputText value="M" id="ot2_5" style="text-wrap:avoid;"/>
</h:panelGrid>
<h:panelGrid id="pg2_6" style="background-color:Yellow;" layout="block">
<af:spacer width="10" height="10" id="s2_1" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg2_7" style="background-color:#d6ffd6;">
<h:panelGrid columns="3" id="pg14">
<h:outputText value="Proposals" id="ot2_51" style="text-wrap:avoid;"/>
<h:outputText value="Frank Doe:Completed Issue" id="ot2_52"
style="text-wrap:avoid;"/>
<h:panelGrid columns="1" id="pg15">
<h:outputText value="Hardline Test" id="ot2_53"/>
<h:outputText value="IQ Test" id="ot2_54"/>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid id="pg2_8">
<af:spacer width="10" height="10" id="s4" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg2_9">
<af:spacer width="10" height="10" id="s5" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg2_10">
<af:spacer width="10" height="10" id="s7" inlineStyle="background-color:Highlight;"/>
</h:panelGrid>
<h:panelGrid id="pg2_11">
</h:panelGrid>
<h:panelGrid id="pg2_12" style="background-color:#d6ffd6;">
<h:outputText value="Individual Not Smart Enough Today" id="ot2_12" style="text-wrap:avoid;"/>
</h:panelGrid>
</h:panelGrid>
2。第二个问题:对于列或行中最宽或最高的单元格内容,我可以应用完整的背景颜色:这是一个单元格示例(嵌套panelGrids)
<h:panelGrid id="pg2_7" style="background-color:#d6ffd6;">
<h:panelGrid columns="3" id="pg14">
<h:outputText value="Proposals" id="ot2_51" style="text-wrap:avoid;"/>
<h:outputText value="Frank Doe:Completed Issue" id="ot2_52"
style="text-wrap:avoid;"/>
<h:panelGrid columns="1" id="pg15">
<h:outputText value="Hardline Test" id="ot2_53"/>
<h:outputText value="IQ Test" id="ot2_54"/>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
但是,如果单元格旁边(右侧或左侧)或下方或上方的数据(某些文本)宽度或高度较小,则背景颜色仅应用于文本后面,并保持细胞的剩余部分透明。
那么世界上如何将背景应用于某个单元格(不是整个列,而不是整个行只是单元格),无论其内容如何?