0

我使用 Richfaces 并拥有一个 Rich:datatable 和嵌套的 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 has style="display:none;" 在谷歌浏览器中，这会导致底部边框不显示。

我的问题是：您知道是否有可能找到解决此问题的解决方法？移动显示：无；在tr或tbody级别已经是一个解决方案。

谢谢！

4

1 回答 1

1

您可以向表格 ( <f:facet name="footer">) 添加页脚，该页脚将在隐藏行下呈现，但如果您不想这样做，可以使用以下 CSS：

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

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

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

于 2013-02-04T11:21:07.060 回答