[CSS] 處理頁籤邊線

理想上的樣子

實際上的樣子

理想上看到的邊線為平均分佈，實際上在每一個div加上border: 1 solid <color> 就會出現上圖這種悲劇。要如何解決這種悲劇，這邊羅列幾種狀況

解法1. 手動推論

用推論的方式看如何分配邊線，缺點為如果資料太動態會比較難找規則。

解法2. 使用table-layout

上網查之後發現這個屬性的效果還蠻好的，只要用table-layout: fixed ，加上寬度為100%，就可以做到用bootstrap 使用.row .col-4 切成三等份的效果。w3c講了很多關於table-layout的用法，另外這篇交代了很多關於Table的用法。

table.mobile-tabs-wrapper {
  table-layout: fixed;
  width: 100%;
}

最重要的是css border-collapse屬性。border-collapse功能是用來將表格欄位邊框合併，讓表格變得更美化，設計師常透過 border-collapse 屬性的 separate 或 collapse 屬性值讓表格欄位的邊框距離加大或是合併在一起。詳細的介紹請看這裡，以及MDN。

table {
  border-collapse: collapse;
}

只不過這解法有個缺點是，我必須要把傳進去的陣列切成三等份來做渲染

呈現結果為：

看全部

下面則是展開全部的樣子

寫法主要為取最後一筆資料，若資料內只有一筆則補兩筆dummyTab、有兩筆則補一筆dummyTab、三筆的話就不動。下圖為分享以前欲寫分群，寫完才發現lodash, ramda套件已經有現成的寫法。

ramda — splitEvery

解法3. 使用display: table

display: table的解法跟上個解法很像，基本上就是讓原本的div利用下列幾種方式扮演表格的角色。

display: table;
display: table-row;
display: tabel-cell;