table태그에 border-collapse : collapse 적용 후 선 굵기 다르게 나옴

실행 했을 때 화면

코드  전체 구조

css코드

선 굵기가 조금씩 다르게 나오는데 왜 이런걸까요? react bootstrap 을 설치했는데 _reboot.scss 때문인가요..? 어떻게 해결해야 할까요?ㅜㅜ

그래서 border-collapse 사용하지 않고 .table-content에는 border을 왼쪽, 위쪽만 주고 

.table-content tr, td에는 border을 오른쪽 아래쪽만 주는 방법도 해봤는데 

위에 캡쳐사진 처럼 선과 선사이에 여백이 조금씩 생깁니다..

어떻게 해결해야 하나요 ㅠㅠㅠ