[Book Buddy / Error Note] table의 table-layout: fixed; 사용시 하위 cell 너비 변경하는 방법

장바구니를 만드느라 아래와 같은 목업 표를 만들었다.

 

체크박스	도서 (colSpan 사용)		수량	금액
체크박스	이미지	도서명	수량	금액

 

 

도서명의 너비를 이미지보다 넓게 하고싶었으나 말줄임표 기능을 넣기 위해 table 태그에 table-layout: fixed;를 적용했더니 타이틀이 colSpan으로 묶여있는 td태그들(이미지, 도서명)이 동일한 간격으로 고정되어버린다. 

 

아래와 같이 colgroup을 만들어 cell 개수만큼 col 태그를 주고 퍼센테이지로 간격을 조정하면 table-layout: fixed; 상태에서도 간격을 조정할 수 있다.

 

  <table>
    <colgroup>
      <col style={{ width: '10%' }}></col>
      <col style={{ width: '20%' }}></col>
      <col style={{ width: '40%' }}></col>
      <col style={{ width: '15%' }}></col>
      <col style={{ width: '15%' }}></col>
    </colgroup>
    <thead>
      <tr>
        <th>체크박스</th>
        <th colSpan={2}>도서</th>
        <th>수량</th>
        <th>금액</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>체크박스</td>
        <td>이미지</td>
        <td>도서명</td>
        <td>수량</td>
        <td>금액</td>
      </tr>
    </tbody>
  </table>

 

처음엔 colgroup까지 thead로 감싸버리는 바람에 고생을 좀 했다. 

 

 

간격이 원하는 만큼 벌려진 것을 확인 할 수 있다.

 

 

+

추가로 react에서 colSpan을 사용하려면 colSpan={2} 이렇게 사용해야 한다..

바닐라에서처럼 colSpan="2" 이렇게 사용하려다 적용이 안 되어서 살짝 당황..

 

 

---

참고자료

 

https://stackoverflow.com/questions/37578362/how-to-add-colspan-attribute-in-reactjs

 

https://velog.io/@super_iaan/CSS-table-layoutfixed%EB%A5%BC-%ED%96%88%EB%8A%94%EB%8D%B0-th-td-%ED%95%9C-%EB%B6%80%EB%B6%84%EB%A7%8C-%EB%84%88%EB%B9%84%EB%A5%BC-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B3%A0-%EC%8B%B6%EB%8B%A4%EA%B3%A0