Bootstrap table plugin not working in 'rtl' table

Question

I'm working with Arabic bootstrap for rtl support . I have a table and Bootstrap table 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 designed my table with bootstrap table plugin. Plugin works using: data-fixed="right" or data-fixed="left". With data left and normal this works fine. But in Arabic Bootstrap and data right , this plugin is not working and shows horizontal scroll and displaced border.

how can I fix this for rtl table?

DEMO RTL NOT WORK : JSFIIDDLE

DEMO NORMAL LTR WORK : JSFIDDLE

Screenshot in FF last version: (SEE scroll and right border Displaced for status and create date..)

Answer 1

Well, your problem isn't really complex, I think that using classes for your td elements would have help you a lot, and I strongly encourage you to use them for this and any other project.

Now, for your solution, simply add this couple lines in your CSS style sheet:

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

Of course, it will be a lot better if you use something like .table.tableRtl td{....} so you can target elements properly and more accurately while letting you use the .table class in other instance(s), but as long as your code goes, this CSS will work.

EDIT

there's an issue with one of the columns not having border. This happens because you have this line in bootstrap-table.css

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

so basically it overrides all borders it has declared previously telling "in the last column, we should have no borders". But in rtl direction, the last column is in fact VISUALLY the first, so we fix it like this:

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

And now it all works as expected, with columns keeping the width as well, and borders behaving as expected

Check CSS fiddle