Wrong CSS is generated when using rich:dataTable with nested rich:tooltip

Question

I use Richfaces and have a rich:datatable with nested rich:tooltip-s. You can imagine the generated HTML looks like this:

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

The problem with this html is in the 2nd (generated from RF) tbody: td has style="display:none;" and in Google Chrome this causes the bottom border being not shown.

My question is: do you know if it is possible to find a workaround to fix this? Moving the display:none; at tr or tbody level would already be a solution.

Thanks!

Answer 1

You can add a footer to the table (<f:facet name="footer">) which will render under the hidden row but if you don't want to you can use this CSS:

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

this will find the last row and add a border at the bottom, of course this will affect every table on your page so you should use some identifiers. Also note that the :last-child selector may not be supported by all browsers (it does work in Chrome).

Other alternative is to wrap the table in a div but you'd need to play a little with the CSS to make it look the way you want.