如何通过CSS旋转.barna2类文本且不破坏边框，保证浏览器兼容性

问题原因 #

1. 现有.barna2选择器会同时匹配顶部和底部所有带该类的单元格，导致底部元素也被应用旋转规则
2. 直接对table-cell类型的单元格元素应用transform变换时，整个单元格（含边框）都会参与变换，会打乱表格原有布局计算，引发边框样式错乱

解决方案 #

该方案兼容性极佳，所有主流浏览器及老版本浏览器均可正常支持，且不会破坏原有样式：

1. 调整CSS选择器范围，仅匹配表格第一行的.barna2元素，避免影响底部同类名元素
2. 仅旋转单元格内的文本内容，不修改单元格本身的布局属性，彻底规避边框错乱问题

代码修改步骤

1. CSS部分修改

首先删除原有.barna2类中的transform: rotate(180deg)属性，新增如下规则：

/* 仅选中表格第一行 .barna2 内的文本容器 */
.sakktabla tr:first-child .barna2 span {
  display: inline-block;
  /* 兼容老版webkit内核浏览器 */
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

2. HTML部分修改

仅给顶部行的.barna2单元格内的字母套上<span>标签，底部同类名单元格无需修改：

<tr>
  <th class="barna1"></th>
  <th class="barna2"><span>H</span></th>
  <th class="barna2"><span>G</span></th>
  <th class="barna2"><span>F</span></th>
  <th class="barna2"><span>E</span></th>
  <th class="barna2"><span>D</span></th>
  <th class="barna2"><span>C</span></th>
  <th class="barna2"><span>B</span></th>
  <th class="barna2"><span>A</span></th>
  <th class="barna3"></th>
</tr>

内容的提问来源于stack exchange，提问作者Pista Kiss