Add slight space between between table and page numbers

Question

I have applied the responsive style to my jQuery Datatable using this link. As shown in the link, there is a slight space or a new line between the table and the page number at the bottom right of the table. I have achieved the same in my table as well. But, as per my requirement I have set a vertical height of my table using the jQuery datatable options as shown below.

"scrollY": "250px",
"scrollCollapse": true,

After applying this change the vertical size is set, scroll bar is fine but there is no space or little space between the table and the page numbers as shown in the below image.

How to add space or make it look exactly like before applying the Scroll-vertical.

Answer 1

Use this CSS:

.dataTables_paginate {margin-top: 15px;}

Adjust the 15px to whatever you want. Also, if you have many datatables inside your body, it is wise to encapsulate a particular one inside an id and give the CSS this way:

#myDataTable .dataTables_paginate {margin-top: 15px;}