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'表

回答

相關問題