[Bootstrap] Panel 中的 table 捲動很慢…

[Bootstrap] Panel 中的 table 捲動很慢…

最近在玩 Bootstrap,遇到了一個奇怪的問題…

在 Panel 裡面放了一個表格 table,像是下面這樣:

<div class="panel panel-success">
<div class="panel-heading">我的帳號列表</div>
<div class="panel-body">
<table>...</table>
</div>
</div>

   

在電腦的 Chrome 裡面捲動頁面時很正常,

可是在我的 Android 手機上,捲動卻會變得卡卡的不順暢…

猜想會不會是手機的 webkit 在處理 panel (有一些 CSS) 裡面含著 table 時,

效率會比較差…

 

把 table 移到 panel 外面時,問題就消失了,

不過 panel 這個 class 也得拿掉,不然原本 Accounts 那個 div 是緊連著表格的,

如果還使用 panel class 的話,div 和表格中間就會出現多餘的空白行了:

<div class="panel panel-success">
<div class="panel-heading">我的帳號列表</div>
</div>
<table>...</table>

 

像是這樣:

Screen Shot 2015-06-07 at 下午12.48.42   

 

改好之後如下:

<div class="panel-success">
<div class="panel-heading">我的帳號列表</div>
</div>
<table>...</table>

  

改好後,空白行就消失囉: 

Screen Shot 2015-06-07 at 下午12.25.19

(本頁面已被瀏覽過 256 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料