在使用 Bootstrap 進行網頁開發時，如果想要自己在進行一些樣式微調，就常會遇到一些預期之外的排版問題，像是樣式改不過去、或是效果只出現一半...之類的。比如今天的例子就是，當我們想要固定表格的表頭（thead）時，表格邊框（border）卻沒辦法一起固定？這種問題該怎麼解呢？
問題的再現
假設我們直接使用原生 HTML 的 table 標籤，並在 thead 中加上 position: sticky; top: 0;，這樣的設置是沒有問題的，表頭以及上下邊框都可以在畫面捲動時牢牢地固定在最上方。
<table>
<thead style="position: sticky; top: 0;">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
問題來了，如果這個表格已經套用了 Bootstrap ，會發現他原先預設是沒有提供固定表頭的樣式。所以當我們想要固定表頭的話，就要另外加上可以固定位置、但不是專門設計給表格使用的 sticky-top 屬性。結果，當滾動頁面時，表頭的邊框（border）沒有跟著被固定住就算了，捲動時還會從原先放邊框的位置看到破了個縫，從下面捲上來的文字直接露出來…真是有夠醜。
<table class="table">
<thead class="sticky-top">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
為什麼會這樣？
會出現這個問題的原因在於，Bootstrap 預設的 CSS 對 .table 這個 class 設定了 border-collapse: collapse; 屬性。所以當我們使用 sticky-top 屬性後再捲動畫面時，邊框就被「折疊」起來、看起來就像被吃掉了… 。
要解決這個問題，我們可以利用 Bootstrap 當中既有的 .table calss 來修改，把 border-collapse 的屬性蓋過去，改成 separate，這樣我們在捲動的時候邊框就不會collapse了。接著再把 border-spacing設成0，這樣邊框之間就不會有縫隙，比較美觀。
.table {
border-collapse: separate;
border-spacing: 0;
}
這樣修改後， thead 的邊框和邊框就可以同步，不會在滾動時出現邊框錯位的情況了。
小結
雖然大部分時候套用 bootstrap 確實是很方便，但有時候當我們要去動他的一些預設樣式時，就會變得不是那麼好改。這時候通常問題是出在樣式套用的優先程度上面，可以先檢查是不是這個樣式是不是被設定在 bootstrap 的 class層級 (比如我們今天所講的例子就是發生在 .table 的class上，所以還不算是太難改)。但如果是直接設在更高層級上面的樣式，那就會比較麻煩了，要注意的地方也會比較多。
所以其實bootstrap不是說不好用，而是要看你對樣式靈活度的需求在哪裡，如果是想要快速的做出美觀好看的頁面，大多數只是想要套用樣式範本的話，確實使用bootstrap會方便又好維護。但如果一開始在設計時，就有很多想要自己修改bootstrap樣式或自創介面的想法的話，建議還是不要直接套 bootatrap，以免反而更費事喔。
codepen範例: https://codepen.io/bonniejhou/pen/yLmPVMM
