目標的效果
假設有一個 table 長這個樣子：
因為資料欄位太多了，導致需要在 table 左右滑動才能看到一行完整的資料 row。可是這樣就導致，滑到後面會變成有點不知道在看哪一個，因為用來辨認的 ID 編號不見了：
因此！如果把最左邊的欄位（ID 編號）固定起來，這樣在左右滑動的時候，都可以辨認現在在看的資料是對應哪一個 ID 的，比較不會迷失方向，效果如下面兩張圖：
我這邊基本上是用 Bootstrap 的 table 去改的，然後也有用到 Bootstrap 的 table-hover 效果。
HTML 的部分
首先要有一個 <div> 把 <table> 包起來。
<table> 的 class “table table-hover” 是 Bootstrap 提供的 table 的 class，會有一些 table 的基本樣式。
而 <table> 的 class “table_v2_2” 則是我自己修改的一些 table 樣式，就只是把預設的 Bootstrap table 樣式調整成另外一個設計的樣式而已。那究竟調整了什麼會在下面的「CSS 的部分」提供，但這裡的調整基本上是跟本篇主題無關的，沒有改也沒關係。
在 <table> 上設了一個 “min-width” 是因為不想讓欄位內的文字，在視窗大小改變的時候，被壓縮到太窄，會不好看。
<div> 的 class “x_scroll table_fix_col_166” 是自訂的，是本篇主題的主要 CSS，一樣在接下來的「CSS 的部分」解說。
CSS 的部分
.x_scroll 是一個自訂的 class，用來做 overflow-x: scroll 的設定。
.table_fix_col_166 也是一個自訂的 class，取名表示是「固定 166px 寬的欄位」。配合 Bootstrap 的 .table 需要做以下的 CSS 調整。其中 166px 就是想要固定的欄位寬度，在這個例子中因為只有固定第一個欄位，所以設定 :first-child 而已。而 left: 15px 是受到 Bootstrap row 跟 col 的 grid system 影響（有把 <div> 放在 “row” 跟 “col” 裡面），row 會有個 margin-left: -15px 的設定，所以要再用 left: 15px 把欄位移過來，如果沒有用 Bootstrap 的 row 跟 col 就不用這個。
如果依照上面 .x_scroll 跟 .table_fix_col_166 的 CSS 設定，應該就可以達到目標效果。
.table_v2_2 雖是自訂的 class，但其實跟本篇主題無關，只是調整 table 的樣式，沒有改也沒關係。
結束！：Ｄ
