我想在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显示“ Uncaught TypeError:Object [object对象]没有方法'stickyTableHeaders'。有人可以帮我解决这个问题:)
最佳答案
默认情况下未启用JavaScript。您必须通过以下方式启用它:
webview.getSettings().setJavaScriptEnabled(true);
关于javascript - 如何在Android WebView中固定表头,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30919713/