跨浏览器实现垂直旋转表头的底部居中对齐方案求助

问题分析 #

原代码通过writing-mode:vertical-rl+transform:rotate(180deg)实现表头垂直旋转，但Chrome和Firefox对这类旋转元素的单元格对齐规则解析存在差异：

• Chrome下vertical-align:middle+text-align:left配合padding能实现底部对齐+水平居中
• Firefox下会默认将旋转后的内容垂直居中、水平右对齐，导致显示异常

兼容解决方案 #

通过调整表头单元格的对齐属性、旋转原点，以及利用内联元素特性，实现跨浏览器一致的效果，同时保证表头宽度最小化：

修改后的完整代码 #

table { border-collapse:collapse; font-family:sans-serif }
thead th {
    /* 垂直旋转核心设置 */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* 强制单元格宽度适配内容（最小宽度） */
    width: 1px;
    white-space: nowrap;
    /* 跨浏览器对齐设置 */
    vertical-align: bottom;
    text-align: center;
    /* 调整内边距，让文字贴紧底部 */
    padding: 0 0.2em 0.5em 0;
    opacity:0.5;
    font-size:90%;
    /* 修复Firefox的旋转原点偏移问题 */
    transform-origin: center bottom;
}
tbody th { text-align:right; padding-right:0.5em }
tbody td { text-align:center; padding:0 0.2em }
.yes { font-weight:bold; color:#060 }
.maybe { color:#440 }
.no  { color:#500 }

<table>
    <thead>
        <tr>
            <th></th>
            <th class="yes">yes</th>
            <th class="maybe">maybe</th>
            <th class="no">no</th>
            <th>who?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Fri, Dec 9, 12pm</th>
            <td class="yes">2</td>
            <td class="maybe">1</td>
            <td class="no">1</td>
            <td><button>≡</button></td>
        </tr>
        <tr>
            <th>Wed, Dec 14, 12pm</th>
            <td class="yes">4</td>
            <td class="maybe">0</td>
            <td class="no">0</td>
            <td><button>≡</button></td>
        </tr>
        <tr>
            <th>Fri, Dec 16, 12pm</th>
            <td class="yes">0</td>
            <td class="maybe">0</td>
            <td class="no">1</td>
            <td><button>≡</button></td>
        </tr>
    </tbody>
</table>

关键修改说明 #

1. 强制最小宽度：设置width:1px+white-space:nowrap，让表头单元格宽度严格适配旋转后的文字内容，避免多余留白
2. 对齐规则统一：
   • 将vertical-align:middle改为vertical-align:bottom，直接指定内容贴紧单元格底部
   • 将text-align:left改为text-align:center，确保水平方向居中，Firefox会遵循这个设置
3. 修复旋转偏移：添加transform-origin: center bottom，保证旋转后的文字围绕底部中心旋转，避免Firefox下的位置偏移
4. 调整内边距：修改padding为0 0.2em 0.5em 0，让文字在垂直方向贴紧底部，水平方向保留少量边距

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