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..)

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..)

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Sep 30, 2014 at 19:32 Devin 7,73066 gold badges4343 silver badges5656 bronze badges asked Sep 28, 2014 at 15:56 Pink CodePink Code 1,85477 gold badges4343 silver badges6666 bronze badges 8

• i don't see a horizontal scroll bar or displaced border in your jsfiddle, can you maybe provide a screen shot? – benomatis Commented Sep 28, 2014 at 16:01
• @webeno: I add screenshot in FF. – Pink Code Commented Sep 28, 2014 at 18:13
• think the whole mixup es from the fact that you're using data-fixed="right" instead of actually leaving everything as is and only use class="text-right" which is the only thing you should normally need. That we you don't have to reverse order your menus and all should be alligned correctly... not sure about the bottom scroll in FF, might be something specific to FF... – benomatis Commented Sep 28, 2014 at 18:35
• @webeno: class="text-right" not a important class. we can remove this. – Pink Code Commented Sep 28, 2014 at 18:38
• no, i meant the other way around, actually, i think you're better off using normal table than rtl... i've never used it but it specifies 'last-child' not to have a right border, however in rtl it will be the first one which obviously doesn't make sense... i suggest to get rid of the reversed table layout, just use the standard one, and add class="text-right" wherever needed... – benomatis Commented Sep 28, 2014 at 18:40

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3 +50

Well, your problem isn't really plex, 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

As mentioned by webeno, the problem seems to be 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 doubled borders on the rightmost edge of the table; in RTL, the :last-child is actually on the left though, which is why status has no right border. I overrode those styles with rules like this:

.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/xsoo79c5/5/ .