vue table uses colgroup for table custom width

vue table uses colgroup for table custom width

By default, the width of the table is allocated according to the table content. If you

want to customize the width, you can set it through the colgroup tag and the col tag:
The number of col corresponds to the number of columns in the table. Because I am making an adaptive size table, so width is the percentage used, the default is px;

 <table class="table-head">
                   <colgroup>
                       <col width="18%">
                       <col width="16.1%">
                       <col width="21.42%">
                       <col width="19.65%">
                       <col width="12.68%">
                       <col width="12.15%">
                   </colgroup>
                   <thead>
                       <tr>
                           <th>Task</th>
                           <th>Study Name</th>
                           <th>Study ID</th>
                           <th>Remaining Time</th>
                           <th>Progress</th>
                           <th>Status</th>
                       </tr>
                   </thead>
               </table>

After setting, it is the width you want/;