Clever Geek Handbook

Datatables - border style is not applied to table cell which is empty

I have a styling issue with datatables. Supported browsers are IE 6 to 10.

I have blank lines in td content, cell border is shifted and distorted. See image below. enter image description here

I looked at the style difference between an empty table cell, and it looks like if the empty data cells don't include border properties for the cell. See below....

The HTML style for a line without blank cells looks like this: enter image description here

The style for a line without blank cells looks like this: enter image description here

The HTML for a row with empty cells looks like this: enter image description here

The style for a row with empty cells looks like this: enter image description here

Can someone help me on how I can solve this problem?

Is it because td tags are empty tags when there is no content? Does css use differently for empty labels? I didn't think so ...

I am using data tables 1.9.4.

thank

+3


source to share


2 answers


I think the key point I can clarify now is that the problem is specific to ie6 and also when running in compatibility mode in ie10 and below. When I turned off compatibility mode in ie10, I had no problem.

Searching it for more errors related to this issue. https://issues.jboss.org/browse/RF-1236

As work on the problem, I used javascript to do the following ...



   $('#search-results-table')
   .on('processing.dt',function( e, settings, processing ){
       if (processing){
               ....

       }else {
               ....
               $('#search-results-table td:empty').html(' ');
       }
       } )

i.e. after processing, add & nbsp for empty cells. This fixed the problem. Special thanks to davidkonrad for his help in solving this problem.

0


source


As an answer to a friendly challenge in the comments: you can actually override the style for empty <td>

without using javascript. Consider this example: Targeting Data Tables 1.9.4 (demo below)

table.dataTable td {
   border-bottom: 1px solid red;
}
table.dataTable {
    border-collapse: separate;
    empty-cells: hide;
}

demo -> http://jsfiddle.net/f5Lvd4xa/



enter image description here

Open the script, try commenting out the last CSS class and update it. Without seeing the content of your custom CSS - custom-myer.css

and styles.jsp

- I can't know exactly what exactly is going on in your particular case, but the above is similar to the experience you have.

+2


source






More articles:


All Articles