画面に表示されたデータを固定して表示したい

###前提・実現したいこと
Bootstrapを使って、テーブルを表示する画面を作ったのですが、DBのカラムが多く横に広がってしまっています。
そのため始めのデータを固定して横スクロールにして見れるようにしたいです。

<th>タグにclass要素を追加して固定すると思うのですが何を入力すれば良いのでしょうか？

以下のようにIDとnameの部分を固定して横にスクロールするとageとweightは見えなくなる。といった形のものを作成したいです。(値は適当です。)
何分初めての質問なので何をしたいかでも伝わっていただけると嬉しいです。。。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
|ID|name|age|weight(kg)|height(cm)|BMI|
|00|aaaa| 10| 40| 140| 20|
－－－－－－－－－－－－－－－－－－－－ー
|← 固定→|← スクロール →|

右にスクロール
＿＿＿＿＿＿＿＿＿＿＿＿＿
|ID|name|height(cm)|BMI|
|00|aaaa| 140| 20|
－－－－－－－－－－－－－
|← 固定→|← スクロール →|

###試してみたこと
追記：9/20
CSSで".lock"を作成
今後の汎用性も考えて<th class="lock">～～</th>とすると固定して表示するようにしたいです。
しかし、.lock要素を追加するとタグがすべて重なってしまい、データを見ることができない。
.lockを要素に追加したら、重ならずに横並びするようにしたいです。

###簡易なソースコード

html
1<html xmlns:th="http://www.thymeleaf.org">
2    <head>
3        <meta charset="UTF-8" />
4        <title>Hello Thymeleaf</title>
5    </head>
6    <body>
7     <div class="scroll-table-wrap">
8      <table class="table-hover">
9       <thead>
10        <tr>
11         <!-- 固定したいデータ -->
12         <th class="lock">ID</th> 
13         <th class="lock">name</th>
14         <!-- スクロールできるデータ -->
15         <th>age</th>
16         <th>weight</th>
17         <th>height</th>
18         <th>BMI</th>
19        </tr>
20       </thead>
21       <tbody>
22        <tr>
23         <td class="lock">00</td>
24         <td class="lock">aaaa</td>
25         <td>10</td>
26         <td>40</td>
27         <td>140</td>
28         <td>20</td>
29        </tr>
30       </tbody>
31      </table>
32     </div>
33    </body>
34</html>
35

CSS
1/** テーブルデータの列を左側に固定*/
2.lock {
3  display: inline;
4  overflow: overlay;
5  position: absolute;
6  text-align: center;
7}

###補足情報(言語/FW/ツール等のバージョンなど)
Spring boot
thymeleaf

kei344

2017/09/19 10:50

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。