Data-Tables misaligning table title and body when scroll is applied

Asked

Viewed 597 times

1

I’m trying to apply the plugin DataTables to the tables in my template, the problem is that when I apply the scroll, the table ends up misaligning the title of the table of its respective data body.

Jsfiddle

jquery css twitter-bootstrap

  • I did here and saw no such difference? how so ... !!! ???

  • @Fulvio You have to scroll to the right.

  • So my ta normal !!! kkkk

  • Yes. In the case of the example table of this Fiddle the problem is happening in the final columns of the table. However, in other tables of the system I have here, the problem occurs in the first columns also.

2 answers

1

From what I understand the behavior is normal, since you’re doing the scroll body of the table and not the table itself. If you repair the scroll vertical does not include the header table.

That is, after doing the scroll horizontal when the table ends, the header Just to the right, and so you can see the body of the table you have to keep doing scroll, hence the "misalignment", which actually doesn’t happen. Understood?

View the image: imagem

  • It really makes sense, but I don’t know what would be the solution to this case. What you suggest to me?

  • From what I see here I think that’s how it works. Maybe you have to use the datatable’s javascript anyway.

  • Your problem there is you’re probably using the script of Bootstrap with that. Here is an example working right. Try therefore to work without js Bootstrap, if it works you’ll know why.

  • Take a look around in this

  • Yes, it might be the bootstrap script. But my template cannot be without it as it is part of the application.

0


I opened a topic related to this problem in the international Stack Overflow where my question was partially solved. Despite the new problem found from the answer, I believe it is related to my template, not only the table itself. So, not to mend the doubt of this topic with another, and also grant the due credits to the author of the solution, put in the link below the link to the fiddle and the topic with the solution. Thank you!

Topic with the solution

Fiddle

Browser other questions tagged jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.