我的固定标题和固定列表有问题。标题是固定的，但列不是。那么我该如何解决这个问题呢？我试图给第一列位置：固定，但它不能正常工作。如果可能的话，不用Javascript。 （我试图从同一主题的早期问题中找到解决方案，但这些都没有帮助我）。这是我的Codepen https://codepen.io/a1503080/pen/LrLezj.
body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
max-height: 70px;
position: relative;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h3>World Cup 2018</h3>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th>Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th>Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th>Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th>Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th>Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>
body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
thead {
position: sticky;
top: 1px;
z-index: 9999;
}
tbody {
height: 80px;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
.fixed {
position: sticky;
width: 5em;
left: 0;
top: auto;
z-index: 999;
}
td:not(.fixed) {
z-index: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="conatiner">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th class="fixed">Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed">Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th class="fixed">Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th class="fixed">Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th class="fixed">Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
