Bootstrap表插件不工作在'rtl'表

我正在与Arabic bootstrap对rtl支持。我有一个表和Bootstrap表插件。Bootstrap表插件不工作在'rtl'表

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>

现在，我设计我的桌子举表插件。插件的工程使用：data-fixed="right"或data-fixed="left"。与data left和normal这工作正常。但在阿拉伯引导和data right，这个插件不工作，并显示水平滚动和移动边界。

我该如何解决这个rtl表？

DEMO RTL不起作用：JSFIIDDLE

DEMO师范大学LTR工作：JSFIDDLE

截图在FF最后一个版本：（SEE滚动和流离失所的状态右边框和创建日期..） enter image description here

来源

2014-09-28 Pink Code

我在你的jsfiddle中看不到水平滚动条或移动边框，你能提供一个屏幕截图吗？ – webeno 2014-09-28 16:01:53

@webeno：我在FF中添加屏幕截图。 – 2014-09-28 18:13:10

认为整个混淆来自事实上你正在使用'data-fixed =“right”'而不是实际上保留所有东西，只使用'class =“text-right”'这是你通常应该做的唯一事情需要。我们你不必倒序排列你的菜单，所有的东西都应该被正确地分配......不知道FF中的底部滚动，可能是FF所特有的... – webeno 2014-09-28 18:35:29

那么，你的问题并不复杂，我认为为你的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就可以工作。

编辑

有与没有边界的一列的问题。这是因为你在引导-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

来源

2014-09-30 19:28:45 Devin

你说得对。您的代码删除并修复滚动，但我有创建日期和状态之间的边界。我不能看到这个？！为什么？ – 2014-09-30 19:51:47

没有注意到，看编辑 – Devin 2014-09-30 19:54:46

小提琴的链接也改变了，所以一定要检查 – Devin 2014-09-30 20:02:59

正如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/。

来源

2014-09-30 18:04:30 caseygrun

Bootstrap表插件不工作在'rtl'表

回答

相关问题