求解CSS中表格的scope="col"是什么意思。。。。

Scope属性定义了行的表头和列的表头：

col: 列表头

row: 行表头

在第一行的加上值为col的scope属性，声明他们是下面(列)数据单元格的表头。同样的，给每行的开头加上值为row的scope属性声明他们是右边(行)数据单元格的表头。

Scope属性还有两个值：

colgroup: 定义列组（column group）的表头信息

rowgroup: 定义行组（row group）的表头信息

实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模

块虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，

增加难度，想知道造成那些难度，需要先从scoped实现原理了解

通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用，如图，样式属性上也会多一个该字符，以保证唯一

可以看出加上 scoped 后的组件里的标签都会多一个 data-v-469af010 的属性，并且在css样式部分可以看出

由此可知，添加 scoped 属性的组件，为了达到不污染全局，做了如下处理：

其实从原理已经能够了解到慎用原因，这里权当总结

<th abbr="salesperson" scope="col">Person</th>

<th abbr="sales" scope="col">Sales</th>

abbr 属性规定表头单元格中内容的缩写版本。

abbr 属性不会在普通的 web 浏览器中造成任何视觉效果方面的变化。

由于在普通的 web 浏览器中不会造成任何视觉效果方面的变化，因此很难说是否存在对 abbr 属性的支持.

表头缩写abbr通常是提供给某些网页阅读器使用的.abbr里面的值是不定的，可以自由写。

至于scope：

scope 属性定义将表头单元与数据单元相关联的方法。

scope 属性标识某个单元是否是列、行、列组或行组的表头。

scope 属性不会在普通浏览器中产生任何视觉变化。

使用 scope 属性，可以将数据单元格与表头单元格联系起来。

通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。

使用 rowgroup 和 colgroup 会将单元格的行组（由 <thead>、<tbody>或 <tfoot>标签定义）或列组中的所有单元格和表头单元格绑定起来（由 <col>或 <colgroup>标签定义）。

值 描述

col规定单元格是列的表头。

row规定单元格是行的表头。

colgroup规定单元格是列组的表头。

rowgroup规定单元格是行组的表头。

最后：这2个属性几乎很少很少看到有人用。了解不了解也没多大意义的。

---