CODEWITHSUNDEEP
htmlcssjsfprimefaces
Jalal Sordo
Jalal Sordo

Reputation: 1675

Datatable border css can't be set on Firefox

When i set the css rule of my datatable to hide the vertical border it works, but when you hover through the datatable rows the border shows up again.

You can reproduce this on primefaces showcase if you'd follow the steps below.

  1. Open Firefox(at least i see this in the last version 31.0).

  2. Go to http://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml

  3. Scroll down to "Single with Row Click" .

  4. Click inspect element on the first row of the "Single with Row Click" datatable.

  5. Alter the following rule : 

    .ui-datatable tbody td {
 border-color: inherit;  
}

    Into this:

    .ui-datatable tbody td {
   border-color: inherit;
   //this rule should remove the vertical border from the datatable.
   border-style: none !important;
 }

  6. Now move mouse through rows you will see the vertical border in between columns shows up and hide on certain rows.

If you were able to reproduce this issue/bug,please provide a workaround, it will be highly appreciated.

I tried altering the .ui-state-hover but still the same issue.

Here is a a preview. enter image description here

Upvotes: 1

Views: 749

Answers (1)

Raa
Raa

Reputation: 154

This will help you....

.ui-datatable tbody td {
    border-bottom-style: double;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top: 1px solid #000000 !important;
}

Upvotes: 2

Related Questions