javascript - Bootstrap 表插件在 'rtl' 表中不起作用

Question

我正在使用 Arabic bootstrap 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 这工作正常。但是在 Arabic Bootstrap 和 data right 中，这个插件不工作并且显示水平滚动和移位的边框。

我该如何为 rtl 表解决这个问题？

演示 RTL 不工作:JSFIIDDLE

演示正常 LTR 工作: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 direction ，最后一列实际上在视觉上是第一列，所以我们这样修复它:

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

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

Check CSS fiddle