Bootstrap boot plugin does not work in rtl table

Question

I am working with arab bootstrap to support rtl . I have a table and Bootstrap download plugin.

HTML:

 <table class="bootstrap-table" id="listComments"> <tr> <th data-fixed="right"> <input type="checkbox" id="checkAll" /> </th> <th class="text-right">Title</th> <th style="width: 200px">Category</th> <th style="width: 140px">Created date</th> <th style="width: 100px">Status</th> <th data-fixed="left">Actions</th> </tr> <tr> <td> <input type="checkbox" name="id[]" class="itemCheckBox" value="6" /> <input type="hidden" name="token[6]" value="b8c5b7b3584268c8a85f1a14c34699dd" /> </td> <td>2323</td> <td>Project</td> <td>09-19-2014</td> <td> <a href="" class="label label-success">Published</a> </td> <td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a> <a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a> </td> </tr> </table> 

Now I created my table using the boot table plugin. The plugin works using: data-fixed="right" or data-fixed="left" . With data left and normal this works great. But in the Arabic bootstrap and data right this plugin does not work and shows horizontal scrolling and a moved border.

how can i fix this for rtl table?

DEMO RTL NOT WORK: JSFIIDDLE

DEMO NORMAL LTR WORK: JSFIDDLE

Screenshot in the latest version of FF: (WATCH scrolling and right border Extrude for status and create date ..)

Answer 1

Well, your problem is not very complicated, I think that using classes for your td elements would help you a lot, and I highly recommend that you use them for this and any other project.

Now for your solution, just add this couple of lines to the CSS stylesheet:

 .table-scroll .table-body td:first-child { border-right:none } .table > tbody > tr > td { width: auto; max-width: 100%; } 

Of course, it will be much better if you use something like .table.tableRtl td{....} so that you can correctly and precisely target the elements, allowing you to use the .table class in other instances, but until your code, this CSS will work.

EDIT

There is a problem that one of the columns has no border. This is because you have this line in bootstrap-table.css

 .table-scroll .table-body td:last-child { border-right: medium none; } 

so basically it redefines all the boundaries that it previously declared “in the last column, we should not have borders”. But in the rtl direction, the last column is actually VISUALLY the first, so we fix it as follows:

 .table-scroll .table-body td:last-child, .table-scroll .table-header th:last-child { border-right: 1px solid #CCC; } 

And now everything works as expected, and the columns that keep the width and borders behave as expected

Check CSS script

Answer 2

As mentioned in webeno, the problem is that bootstrap-table.css applies these rules:

 .table-scroll .table-header th:last-child{ border-right:none; } .table-scroll .table-body td:last-child{ border-right:none; } 

This is in order to get rid of double borders at the extreme edge of the table; in RTL :last-child is actually on the left, so status does not have a valid border. I tried these styles with the following rules:

 .table-scroll .table-header th:last-child { border-right:1px solid #CCC; } .table-scroll .table-body td:last-child { border-right:1px solid #CCC; } .table-scroll .table-header th:first-child { border-right:none; } .table-scroll .table-body td:first-child { border-right:none; } 

I also got rid of the data-fixed="right" attributes. Here's a fixed fiddle: http://jsfiddle.net/xsoo79c5/5/ .