我需要创建一个包含固定thead和可滚动tbody的表。我还需要thead列适合tbody列。
例如，我有这样的表：
This worked for me
1.goto platforms\android\cordova-plugin-crosswalk-webview folder
2.Open .gradle file
3.find
dependencies { compile xwalkSpec }
and replace with
dependencies {
compile 'org.xwalk:xwalk_core_library:22.52.561.4'
}
**
您有任何想法将thead列适合tbody列吗？
答案 0 :(得分：1)
您可以为position: fixed设置thead：
* {
box-sizing: border-box
}
html,
body {
padding: 0;
margin: 0
}
th {
border: 1px solid red
}
td {
border: 1px solid green
}
table {
position: relative;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin-top: 21px
}
thead {
position: fixed;
display: table;
table-layout: fixed;
border-collapse: collapse;
top: 0;
left: 0;
right: 0;
width: 100%;
background: #fff;
}<table>
<thead>
<tr>
<th>
aaa
</th>
<th>
aaabbb
</th>
<th>
aaabbbccc
</th>
<th>
aaabbbcccddd
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
asdfaaabbb
</td>
<td>
asdfaaa
</td>
<td>
asd
</td>
</tr>
</tbody>
</table>
答案 1 :(得分：1)
希望以下代码段可以帮助您
.fixed_headers {
width: 300px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
width: 100px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}<table class="fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>