[React] table column width 지정하기 - colgroup을 활용하여

<colgroup>은 <table> 태그 내에서 각 열의 특성을 지정할 때 사용된다.
각 열의 너비 비율을 설정하기 위해서, 각 <col> 태그에 width를 설정해주었다.

<table>
  <colgroup>
    <col width={"2%"} />
    <col width={"5%"} />
    <col width={"15%"} />
    <col width={"15%"} />
    <col width={"63%"} />
  </colgroup>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

또, 아래처럼 span 속성을 통해서 한 번에 여러 열에 특성을 부여할 수 있고,
style 속성을 이용해서 background-color 등을 설정할 수 있다.

<table>
  <colgroup>
    <col width={"2%"} style={{ backgroundColor: "black" }}/>
    <col width={"5%"} />
    <col span={2} width={"15%"} />
    <col width={"63%"} />
  </colgroup>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>