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样式不生效。

table colgroup 什么时候不生效

colgroup 元素用于定义表格中一组列的属性，例如宽度、背景色等。它通常会生效，但以下几种情况下可能会失效：

col 元素没有定义宽度： 如果 colgroup 中的 col 元素没有定义宽度，那么 colgroup 的宽度属性将不会生效。
```
<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```
在这种情况下，两列的宽度将根据内容自动调整，colgroup 的宽度属性不会影响列的宽度。
col 元素的宽度与 colgroup 的宽度冲突： 如果 col 元素的宽度与 colgroup 的宽度冲突，那么 col 元素的宽度将优先生效。
```
<table>
  <colgroup style="width: 200px;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```
在这种情况下，两列的宽度将分别为 100px，colgroup 的宽度属性不会生效。
col 元素的宽度超过 colgroup 的宽度： 如果 col 元素的宽度超过 colgroup 的宽度，那么 col 元素的宽度将被截断，colgroup 的宽度属性将不会生效。
```
<table>
  <colgroup style="width: 200px;">
    <col style="width: 150px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```
在这种情况下，两列的宽度将被截断为 100px，colgroup 的宽度属性将不会生效。

使用 CSS 样式覆盖 colgroup 的样式： 如果使用 CSS 样式覆盖了 colgroup 的样式，那么 colgroup 的样式将不会生效。

<table>
  <colgroup style="width: 200px;">
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

<style>
  table colgroup {
    width: 100px;
  }
</style>