CSS table-layout:fixed를 했는데 th, td 한 부분만 너비를 변경하고 싶다고?

table을 하면서 규격을 한방에 맞추려고 table-layout:fixed; 옵션을 주어버렸다.
그러니까 화면에는 이쁘게 출력되지만 너비조정이 불가하게 되어버린 상황...
고럴때 바로 태그네임(colgroup과 col)이 필요하다.

 <table>
   <colgroup>
     <col style={{ width: '15%' }} />
     <col style={{ width: '45%' }} />
     <col style={{ width: '40%' }} />
   </colgroup>            
   <thead>
     <tr>
       <th colSpan={3}>우리집 소식</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>101동 104호</td>
       <td>2021-03-28</td>
     </tr>
   </tbody>
 </table>