IE환경 Bootstrap4 table flex 오류 해결하기

개인적으로 대학원 홈페이지를 만들면서 생기는 오류중에 브라우저간 호환성을 맞추는 작업이 가장 어려웠다.

초안으로 만들땐 jQuery1버전과 Bootstrap3버전을 이용했기 떄문에 Internet Explorer에서 별다른 오류사항이 나오지 않았다.

(간혹 화면에서 멀리표시되는 오류빼면)

 

이번에 IE10이전 브라우저는 지원하지 않기로 결심하면서 jQuery를 버리고 Vanilla JS (ES6+)를 사용하고 Boostrap4로 업데이트 하였다. 그런데 크롬이나 파이어폭스에서는 문제가 나지 않았지만 IE11에서 오류가 나왔다. ES6문법을 지원하지 않았던 것이다.

이 문제는 babel로 풀었는데 또 다른 복병이 나타났다.

 

위 사진처럼 Table이 일정하게 나오지 않았다.

<table class="table table-bordered table-hover table-responsive">
  <thead>
    <tr class="row md-0">
        <th class="col-1">No.</th>
        <th class="col-5">제목</th>
        <th class="col-2">작성자</th>
        <th class="col-3">작성일</th>
        <th class="col-1">조회수</th>
    </tr>
  </thead>
</table>

 

row로 flex를 주고 col로 bootstrap의 비율 지정 class를 사용하였다.

하지만 IE에서 flex오류가 발생하는 것을 알 수 있었다. (flex를 풀면 정상적으로 나온다.)

 

Google에 검색해보면 알겠지만 StackOverflow나 github issue에 질문이 많이 올라와 있는 것을 볼 수 있다.

그중에 Boostrap4 issue에 있는 하나의 답변을 가져왔다.

해석하자면 boostrap4를 사용할 때 table에 row나 column을 적용하지 말라고 한다.

 

그래서? 어떻게 하라는 건데라는 생각으로 더 찾아보았는데 다행히 질문중에 해결된 것이 있었다.

https://github.com/twbs/bootstrap/issues/863

<table class="table table-bordered table-hover table-responsive">
  <thead>
    <tr>
      <th style="width: 7%;">No.</th>
      <th style="width: 45%;">제목</th>
      <th style="width: 15%;">작성자</th>
      <th style="width: 25%;">작성일</th>
      <th style="width: 8%">조회수</th>
    </tr>
  </thead>
</table>

결국 row 클래스와 col 클래스를 table에서 빼고 직접적으로 width를 주었다.

그랬더니 IE에서 해결됬음은 물론이고 Chrome에서도 col을 적용한 것과 같이 나온다. 

 

아무튼 한국에서 IE가 없어지는 날까지 고생해야할듯 하다.