如何在Android WebView中固定表頭

Question

我想在android webview中顯示一個表格，它要求表格可以水平和垂直滾動。

 body { margin: 0px; } table { border-collapse: collapse; margin-bottom: 3em; background: #fff; } td, th { padding: 0.75em 1.5em; text-align: left; } td.err { background-color: #e992b9; color: #fff; font-size: 0.75em; text-align: center; line-height: 1; } th { background-color: #31bc86; font-weight: bold; color: #fff; white-space: nowrap; } .thead { position: fixed; } tbody th { background-color: #2ea879; } tbody tr:nth-child(2n-1) { background-color: #f5f5f5; transition: all .125s ease-in-out; } tbody tr:hover { background-color: rgba(129,208,177,.3); } 

 <table > <thead> <tr> <th>產品ID</th> <th>產品編碼</th> <th>產品名稱</th> <th>產品規格</th> <th>配置</th> <th>配置1</th> <th>配置2</th> <th>單價</th> <th>折扣</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>33333333333333333333333333333333333333333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> <tr> <td>1</td> <td>A86</td> <td>產品1</td> <td>10X10</td> <td>sfsdfsdfsdfsdfs</td> <td>333333333333333</td> <td>1923</td> <td>0.9</td> <td></td> </tr> </tbody> </table> 

我嘗試使用[StickyTableHeaders] [1]

[1]： https : //github.com/jmosbech/StickyTableHeaders ，它可以在我的Windows chrome中使用，但是當調用webView.loadUrl時它在Android中不起作用，看來js在android，logcat中不起作用顯示“未捕獲的TypeError：對象[object Object]沒有方法'stickyTableHeaders'。有人可以幫我解決這個問題:)

Answer 1

默認情況下未啟用JavaScript。 您必須通過以下方式啟用它：

webview.getSettings().setJavaScriptEnabled(true);