Problem with Bottom border of Last line in using scrollX. Bad position if few results

Nounours13

Hello,
First of all, thank you for all the work you are doing to update the new version 2.1 of datatables.
I noticed a problem with the last line if you use the scrollX option with or without bootstrap 4.
The bottom border of the last line is not visible if the lines to fill the height defined in the scrollX option are not sufficient

If you do not use bootstrap, it is the same problem if you activate the borders.

This is an example and a picture with bootstrap :
https://live.datatables.net/larucuha/3/edit?html,js,output

This is an example and a picture without bootstrap :

 https://live.datatables.net/soxizesa/1/edit?html,js,output
 ![](https://datatables.net/forums/uploads/editor/iu/r9loo95djr1p.png "")

Thanks for your help.

Nounours13

Sorry le last image don't work.
This is the image

allan

Add scrollCollapse to your table options: https://live.datatables.net/larucuha/4/edit .

Allan

Nounours13

Hi Allan,
Yes indeed I had seen this option and with this option it works correctly. But in version 1.1x of datatables, it seems to me that this border bug did not exist.
In addition, it was very practical at the display level because we can define a fixed zone for the table.
Do you think you will make a correction or not of this problem so that I know if I need to modify my display code.
Thanks again for taking the time to answer me.

allan

Fair point! v2 changed how the table borders are operated to be more reliable (except in this case apparently!).

The issue is that the border is applied to the table cells, which doesn't expand down the non-collapsed container. The container does have a bottom border, which is the line at the bottom, but if we simply add left and right borders:

div.dt-container div.dt-scroll-body {
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

then next to the table we get double width border (i.e. the container + the border on the table cells).

It is possible to handle this with an outline which is offset by -1px:

div.dt-container div.dt-scroll-body {
  border-bottom: none;
  outline: 1px solid #dee2e6;
  outline-offset: -1px;
}

https://live.datatables.net/larucuha/3/edit

I'm not sure I'll include that in the DataTables distribution though. I might need to revisit the border decision, although that has a significant knock on impact on other things such as column widths and plugins.

Allan

Nounours13

Hi Allan,
Thanks a lot for the resolution of the table border with the modification of the css:

div.dt-container div.dt-scroll-body {
border-bottom: none;
outline: 1px solid #dee2e6;
outline-offset: -1px;
}

And I think that in my case this will allow me to solve the display problem.

On the other hand, there is still a problem with the last line of the table whose bottom border are still missing.
This is the picture and the link to livedatatables

https://live.datatables.net/larucuha/5/edit

Did you have a soluce for this ?

Really thanks again for your help.

allan

This little bit of CSS will do:

div.dt-scroll-body table tbody tr:last-child td {
  border-bottom: 1px solid #dee2e6 !important;
}

https://live.datatables.net/larucuha/6/edit

Allan

Nounours13

Thanks allan and Have a good day.