最外面的矩形框，是table row里任意一个元素被focus之后，触发整个cx-table :focus-within的选择器后生成的效果：
中间的一条竖线，是a标签 focus后的效果；
button标签focus之后，产生一个小的矩形框；
注意cx-table:focus-within的outline-offset -2px是必须的：
否则最后整个table row的focus-within的border，就是下图上下两根线，会超出table border灰线，看起来很ugly.
如果直接在Chrome开发者工具里选中<tr>标签页，然后在Styles里手动勾上:focus-within，此时效果如下：
关于a标签页的focus border，我还有一些有趣的发现。
下列这两个property去掉后，又能看到a的focus border了：
- width: 100%;
- min-height: 74px;
加上之后，又变成只有最左边有focus border了：
SAP Spartacus这个自适应的table，如果屏幕尺寸过窄，则只会显示name这一列：
在这种窄屏的显示风格下，此时a标签的focus border就正常了：
更多Jerry的原创文章，尽在："汪子熙":
网友评论