我正在使用 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 上一版本中的屏幕截图:(查看滚动条和右边框以了解状态和创建日期..)
最佳答案
好吧,你的问题并不复杂,我认为为你的 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;
}
现在一切都按预期工作,列也保持宽度,边框也按预期运行
关于javascript - Bootstrap 表插件在 'rtl' 表中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26086716/