Question

我使用Richfaces并拥有一个富有的：带嵌套rich的数据表：tooltip-s。您可以想象生成的HTML如下所示：

<table style="width: 400px; border: 3px solid #000; caption-side: bottom; border-collapse:collapse;">
  <caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog Shasta</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Fur Shed (mm)</th>
    </tr>
  <thead>
  <tbody style="background-color: #ff3;">
    <tr>
      <td>April</td>
      <td>20</td>
    </tr>
    <tr>
      <td>May</td>
      <td>19</td>
    </tr>
    <tr>
      <td>June</td>
      <td>10</td>
    </tr>
    <tr>
      <td>July</td>
      <td>6</td>
    </tr>
    <tr>
      <td>August</td>
      <td>8</td>
    </tr>
    <tr>
      <td>September</td>
      <td>14</td>
    </tr>
  </tbody>
  <tbody>
<tr>
  <td style="display:none;">
  <script type="text/javascript">
    new RichFaces.ui.DataTable("form1:table1:0:j_idt227",{"ajaxEventOptions":{}} )
  </script>
  </td>
</tr>

这个html的问题是在第二个（从RF生成）tbody： td 有 style =“display：none;”并且在Google Chrome中这会导致底部边框未显示。

我的问题是：你知道是否有可能找到解决方法来解决这个问题？在 tr 或 tbody 级别移动 display：none; 已经是一个解决方案。

谢谢！

Answer 1

您可以在表格（<f:facet name="footer">）中添加一个页脚，该页脚将在隐藏行下呈现，但如果您不想，则可以使用此CSS：

table > tbody > tr:last-child {
    border-bottom: 3px solid #000;
}

这将找到最后一行并在底部添加一个边框，当然这会影响页面上的每个表格，因此您应该使用一些标识符。另请注意，所有浏览器可能都不支持:last-child选择器（它在Chrome中可以使用）。

其他替代方法是将表格包装在div中，但您需要使用CSS进行一些操作以使其看起来像您想要的那样。

使用rich：dataTable和嵌套的rich：tooltip时会生成错误的CSS

1 个答案: