safari table col width 이상하게 되는 문제

문제

컬럼이 2개인 table을 만들 때
컬럼 하나는 너비를 고정하고싶고 나머지 컬럼의 너비는 100%에서 첫번째 컬럼을 뺀 값으로 하고 싶을때 다음과 같이 적었다.

<table>
  <colgroup>
    <col span="1">
    <col span="1">
  </colgroup>
  <tbody>
    ... 생략
  </tbody>
</table>

col {
	&:nth-of-type(1) {
		width: 266px;
	}
	&:nth-of-type(2) {
		width: calc(100% - 266px);
	}
}

이렇게 했을때 크롬에서는 문제가 없었는데 사파리에서는 이상하게 보였다.

크롬:

사파리:

시도

구글에 safari table col이라고 검색해서 나온 첫번째 스택오버플로우 글을 봤다.
글의 답변에는 width: calc(100% - 70px)이런식으로 쓰는게 문제라고 했다.

https://stackoverflow.com/questions/37305876/table-column-hidden-in-safari-when-using-css-style-for-width-that-contains-a-per

해결

컬럼이 2개인 table

너비를 고정하고 싶은 컬럼의 width를 px로 설정하고, 나머지 컬럼의 width는 설정하지 말자.
그러면 나머지 컬럼의 width는 100% - 첫번째 컬럼의 width인 것처럼 된다.

컬럼이 3개 이상인 table

너비를 고정하고 싶은 컬럼의 width와 다른 컬럼들의 width 모두 %로 설정하자.
(이게 최선인듯?)