Plug-in tabella bootstrap non funzionante nella tabella 'rtl'

Question

Sto lavorando con Arabic bootstrap per il supporto rtl. Ho un plug-in table e bootstrap per la tabella.

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> 

Ora, ho progettato il mio tavolo con il plugin tavolo bootstrap. Plugin funziona con: data-fixed="right" o data-fixed="left". Con data left e normal funziona perfettamente. Ma in Arabic Bootstrap e data right, questo plugin non funziona e mostra lo scorrimento orizzontale e il bordo spostato.

come posso risolvere questo per la tabella rtl?

DEMO RTL non funziona: JSFIIDDLE

DEMO NORMALE LTR LAVORO: JSFIDDLE

Schermata in FF ultima versione: (vedi scorrere e margine destro sfollati per lo stato e la data di creazione ..)

Answer 1

Bene, il tuo problema non è molto complesso, penso che l'utilizzo di classi per gli elementi td ti avrebbe aiutato molto e ti incoraggio vivamente a utilizzarli per questo e qualsiasi altro progetto.

Ora, per la soluzione, è sufficiente aggiungere questa coppia righe nel foglio di stile CSS:

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

Naturalmente, sarà molto meglio se si usa qualcosa come .table.tableRtl td{....} in modo da poter indirizzare gli elementi correttamente e in modo più accurato mentre ti consente di utilizzare la classe .table in altre istanze, ma finché il codice va avanti, questo CSS funzionerà.

EDIT

c'è un problema con una delle colonne che non hanno confine. Questo accade perché avete questa linea in bootstrap-table.css

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

così fondamentalmente la precedenza su tutte le frontiere si è dichiarato in precedenza dicendo "nell'ultima colonna, dovremmo avere confini".Ma nel rtl direction, l'ultima colonna è infatti visivamente la prima, quindi abbiamo risolvere il problema in questo modo:

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

E ora tutto funziona come previsto, con colonne mantenendo la larghezza pure, e le frontiere comportandosi come previsto

Check CSS fiddle

Answer 2

Come accennato da webeno, il problema sembra essere che bootstrap-table.css applica queste regole:

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

Questo serve per eliminare i bordi raddoppiati sul bordo più a destra del tavolo; in RTL, lo :last-child è in realtà sulla sinistra, ed è per questo che status non ha un bordo destro. Ho calpestato quegli stili con regole come questo:

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

anche io sono liberato delle data-fixed="right" attributi. Ecco un violino fisso: http://jsfiddle.net/xsoo79c5/5/.