html table colgroup col 使用、功能测试

代码

<template>
    <div class="page-box">
        <!-- colgroup 使用方式1 -->
        <table>
            <colgroup>
                <col span="2" style="width: 100px" />
                <col style="width: 50px" />
                <col style="width: 50px" />
            </colgroup>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
                <td>Column 4</td>
            </tr>
        </table>
        <!-- colgroup 使用方式2，不需要写全部的col -->
        <table>
            <colgroup>
                <!-- 设置宽度width: 100px，不是总的宽度，而是每个子td都会是这个宽度，如果被影响的td想不同宽度，只能分开设置了 -->
                 <!-- 经过测试所有样式，只有width和background可以生效，其他font border之类的样式都不生效 -->
                <col span="2" style="width: 100px; background-color: red" />
                <col style="width: 50px" />
            </colgroup>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
                <td>Column 4</td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
</script>

<style lang="scss" scoped>
table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 5px;
}
</style>

总结

col 只能设置背景颜色和width，其他css样式不生效。