padding header and footer in right to left tables

rahimramezanian

I created a right to left table check the link below
https://jsfiddle.net/rahim1384/4krq2azc/6/
you can see that the header has an extra space and no column is exactly below its header.

I decided to add the following css

.dataTables_scrollHeadInner {
  padding-left: 16px;
  padding-right: 0px important!;
}
.dataTables_scrollFootInner {
  padding-left: 16px;
  padding-right: 0px important!;
  box-sizing: content-box;
}
.dataTables_scrollFoot {
  position: relative;
}

check this link
https://jsfiddle.net/rahim1384/4krq2azc/8/
it seems good.

But if I search for 'row3' because the height of table becomes smaller, now the body part is longer than the header part

how we should handle it?
BTW: The same is happening for footer.

sandy

Hi rahimramezanian,

There does seem to be something funny going on here. In your html if you set

div.dataTables_wrapper {
  direction: rtl;
}

to

html {
  direction: rtl;
}

Then it certainly improves but still isn't perfect.

I've filed a bug for this and we will fix it as soon as we can.

Apologies,
Sandy