Bootstrap表插件无法在'rtl'表中工作

Question

我正在使用阿拉伯语引导程序寻求rtl支持.我有一个表和Bootstrap表插件.

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>

现在,我使用bootstrap表插件设计了我的表.插件使用:data-fixed="right"或data-fixed="left".随着data left和normal这工作正常.但在阿拉伯语Bootstrap中 data right,此插件无法正常工作,并显示水平滚动和移位边框.

我怎样才能为rtl表修复此问题？

DEMO RTL不工作:JSFIIDDLE

DEMO NORMAL LTR WORK:JSFIDDLE

FF最后版本的屏幕截图:(查看滚动和右边框移位状态和创建日期..)

Answer 1

好吧，你的问题并不复杂，我认为为你的td元素使用类会对你有很大帮助，我强烈鼓励你在这个项目和任何其他项目中使用它们。

现在，对于您的解决方案，只需在 CSS 样式表中添加以下几行即可：

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

当然，如果您使用类似的东西会更好，.table.tableRtl td{....}这样您就可以正确且更准确地定位元素，同时让您.table在其他实例中使用该类，但只要您的代码正常运行，这个 CSS 就会起作用。

编辑

其中一列没有边框存在问题。发生这种情况是因为 bootstrap-table.css 中有这一行

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

所以基本上它会覆盖之前声明的所有边框，告知“在最后一列中，我们不应该有边框”。但在rtl 方向上，最后一列实际上在视觉上是第一列，所以我们像这样修复它：

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

现在一切都按预期工作，列也保持宽度，边框也按预期运行

检查 CSS 小提琴