<table> 에서flex, block이나 상대적인 width 적용하기 (html, css)

<table>은 기본적으로 display: table이 적용되어 있으며
아래의 요소들(<tbody>, <tr>,<th>,<td>)역시 기본 display가 존재하기에
<th>나 <td>에게 display: flex를 적용하거나 가로,세로 길이를 상댓값으로(%)
정할려면 상위의 요소들의 display를 전부 바꿔줘야합니다.
 
설명은 여기서 줄이고 바로 소스코드를 보여드리겠습니다.
 

// css

table {
 border-collapse: collapse;

/* flex 일때 */
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;

/* block 일때 */
 display: block;
  
 width: 100%;
}

tbody {
 display: inline-flex;
 width: 100%;
}

tr {
 display: flex;
 width: 100%;
}

th,td {
 border: gray solid 1px;
}

th {
 width: 50%;
}

td {
 display: inline-flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 
  width: 50%;
  height: 50px;
}

table의 width 값을 기준으로 아래의 요소들의 상댓값의 수치가 정해집니다.
 
만약 기본 display: table을 사용하고 싶다면
display: block, flex 및 tbody style 을 삭제하셔도 유지 됩니다!

//body
<table>
 <tbody>
  <tr>
   <th>
    제목1
   </th>
   <th>
    제목2
   </th>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>
    내용1
   </td>
   <td>
    내용2
   </td>
  </tr>
  <tr>
   <td>
    내용1
   </td>
   <td>
    내용2
   </td>
  </tr>
  <tr>
   <td>
    내용1
   </td>
   <td>
    내용2
   </td>
  </tr>
 </tbody>
</table>