vue table使用colgroup进行表格自定义宽度

vue table使用colgroup进行表格自定义宽度

在默认情况下table表格的宽度是根据表格内容进行分配的

想自定义宽度可以通过colgroup标签配合col标签设置：
col的个数与表格的列数对应，因为我做的是自适应大小表格，所以width是用的百分比，默认是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>

设置后就是自己想要的宽度/；