html - 使用 rich 时生成错误的 CSS :dataTable with nested rich:tooltip

Question

我使用 Richfaces 并有一个带有嵌套 rich:tooltip-s 的 rich:datatable。您可以想象生成的 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 中这会导致未显示底部边框。

我的问题是:您知道是否可以找到解决此问题的解决方法吗？将 display:none; 移动到 tr 或 tbody 级别已经是一个解决方案。

谢谢!

Answer 1

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

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

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

另一种方法是将表格包裹在一个 div 中，但您需要稍微调整一下 CSS 以使其看起来像您想要的那样。