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可以正常使用。但是在阿拉伯语Bootstrap和data right中，此插件无法正常工作并显示水平滚动和移位边框。

如何为rtl表修复此问题？

DEMO RTL不工作：JSFIIDDLE

DEMO NORMAL LTR WORK：JSFIDDLE

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

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;
}

所以基本上它覆盖了之前宣称的所有边界＆＃34;在最后一栏中，我们应该没有边界＆＃34;。但是在rtl direction中，最后一列实际上是第一列，所以我们修复它：

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

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

Check CSS fiddle

Answer 2

正如webeno所提到的，问题似乎是bootstrap-table.css适用这些规则：

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

这是为了摆脱桌子最右边的双边框;在RTL中，:last-child实际上在左侧，这就是status没有右边框的原因。我用这样的规则覆盖了那些风格：

.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;
}

我也摆脱了data-fixed="right"属性。这是一个固定的小提琴：http://jsfiddle.net/xsoo79c5/5/。

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

2 个答案: