Bootstrap-Tabelle Plugin funktioniert nicht in 'rtl' Tabelle

Question

Ich arbeite mit Arabic bootstrap für rtl Unterstützung. Ich habe eine Tabelle und ein Bootstrap-Tabellen-Plugin.

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> 

Nun, ich entworfen meine Tabelle mit Bootstrap-Tabelle Plugin. Plugin funktioniert mit: data-fixed="right" oder data-fixed="left". Mit data left und normal funktioniert das gut. Aber in arabischen Bootstrap und data right funktioniert dieses Plugin nicht und zeigt horizontale Scroll und verschobenen Rahmen.

Wie kann ich das für RTL-Tabelle beheben?

DEMO RTL nicht: JSFIIDDLE

DEMO NORMAL LTR ARBEIT: JSFIDDLE

Screenshot in FF letzte Version: (SEE scrollen und rechten Rand für den Status Vertriebene und Datum erstellen ..)

Answer 1

Nun, Ihr Problem ist nicht wirklich komplex, ich denke, dass die Verwendung von Klassen für Ihre td Elemente Ihnen viel geholfen haben, und ich ermutige Sie stark, sie für dieses und jedes andere Projekt zu verwenden.

Nun, für Ihre Lösung, fügen Sie einfach diese paar Zeilen in der CSS-Stylesheet:

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

Natürlich wird es viel besser, wenn Sie so etwas wie .table.tableRtl td{....} verwenden, so können Sie Elemente richtig zielen und genauer, während Sie die .table Klasse in anderen Instanzen verwenden können, aber solange Ihr Code geht, wird dieses CSS funktionieren.

EDIT

gibt es ein Problem mit einer der Säulen nicht Rand aufweist. Dies geschieht, weil Sie diese Zeile in Bootstrap-table.css haben

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

so im Grunde ist es alle Grenzen überschreibt er zuvor erklärt hat, zu sagen „in der letzten Spalte, sollten wir keine Grenzen haben“.Aber in rtl direction, ist die letzte Spalte in der Tat SICHTLICH die ersten, so dass wir reparieren es so:

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

Und jetzt alles funktioniert wie erwartet, mit Säulen, die Breite als auch zu halten und Grenzen als verhalten

erwartet

Check CSS fiddle

Answer 2

Wie von webeno erwähnt, scheint das Problem zu sein, dass bootstrap-table.css diese Regeln anwendet:

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

Dies ist, um doppelte Ränder auf der ganz rechten Kante des Tisches loszuwerden; in RTL ist die :last-child tatsächlich auf der linken Seite, weshalb status keine rechte Grenze hat. Ich overrode diese Stile mit Regeln wie folgt aus:

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

Ich habe auch der data-fixed="right" Attribute befreien. Hier ist eine feste Geige: http://jsfiddle.net/xsoo79c5/5/.