1. 冻结头

正常情况
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11

冻结头
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11

2. 冻结列

正常情况(width: 100%)
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11

水平滚动时，如果 table 包裹在 容器 中时，必须设置 table 的 width:100%，否则 table 中 cell 的宽度会被重新计算，不会超出容器的宽度，滚动条也就没了。

不管你加不加 table-layout: fixed 都会有这个问题

目前只能设置 table width:100% 才行。其他 width 也不行，如 max-width。 但这会出现 当 table 总宽度小于容器宽度时，又会被拉伸。。。

一种不太好的解法，就是用 js 计算表格的宽度是否大于容器，如果大于则给 table 设置 width: 100% ，否则不设置。

为防止计算错误，需要为 table 加入下面样式，清除额外的空间计算错误问题：

.table1 {
  border-spacing: 0;
  box-sizing: border-box;
}

如下：

js自动处理添加(width: 100%)样式问题
A B C
A1 B1 C1 
let realWidth = 0;
[...table1_colgroup.children].forEach(el => {
  realWidth += +el.style.width.split('px')[0]
});

console.log({})
if (table1_container.offsetWidth < realWidth) {
  table1.style.width = '100%'
} else {
  table1.style.width = ''
}
通过给 col 同时设置 width/min-width/max-width 可解决超过宽度的缩放问题: (max-width 在 col 中对cell无效)
不足
A B C
A1 B1 C1

超出
A B C D E
A1 B1 C1 D1 E1

max-width 对cell 宽度的影响：
col max-width 对 cell 不生效
A B C
A1 B1bbbbbbbbbbbbb C1

max-width 放入 cell 中生效
A B C
A1 B1bbbbbbbbbbbbb C1

所以，用colgroup设置，可能对 dom 的修改比较小，但有 max-width 的问题。 每个cell 都写样式，对dom的操作会多，但不会有样式问题。

另一种方式就是 width 100% ，会解决这个问题，但双会出现小于时的缩放问题
A B C C C
A1 B1bbbbbbbbbbbbb C1 C1 C1

冻结首列
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11

3. 冻结 Footer

冻结footer
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11
A B C D E F G

4. 行列冻结

冻结footer
A B C D E F G
A1 B1 C1 D1 E1 F1 G1
A2 B2 C2 D2 E2 F2 G2
A3 B3 C3 D3 E3 F3 G3
A4 B4 C4 D4 E4 F4 G4
A5 B5 C5 D5 E5 F5 G5
A6 B6 C6 D6 E6 F6 G6
A7 B7 C7 D7 E7 F7 G7
A8 B8 C8 D8 E8 F8 G8
A9 B9 C9 D9 E9 F9 G9
A10 B10 C10 D10 E10 F10 G10
A11 B11 C11 D11 E11 F11 G11
A B C D E F G

header/footer 最好独立出 tbody 外的表格，然后同步去修改水平滚动条。因为列的 sticky，在滚动的时候，可能会盖住 header。

或者加一个 z-index:1 来避免。