我的固定标题和固定列表有问题。标题是固定的，但列不是。那么我该如何解决这个问题呢？我试图给第一列位置：固定，但它不能正常工作。如果可能的话，不用Javascript。（我试图从同一主题的早期问题中找到解决方案，但这些都没有帮助我）。这是我的Codepen。
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 …