我的表格带有旋转标题，在 Chrome 中看起来符合预期，但在 Firefox 中却不是。
如何让它们跨浏览器工作，以便它们垂直旋转、垂直位于单元格底部、水平居中并占用最小宽度？
我使用的代码对此答案进行了稍微修改，以使其在 Chrome 中工作：
1
873table { border-collapse:collapse; font-family:sans-serif }
thead th {
/* Rotate vertical: https://stackoverflow.com/a/47245068 */
-ms-writing-mode:tb-rl;
-webkit-writing-mode:vertical-lr;
writing-mode:vertical-rl;
transform:rotate(180deg);
vertical-align:middle;
text-align:left;
padding:0.5em 0 0 0;
opacity:0.5;
font-size:90%;
}
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
这似乎对我有用，在 Chrome、Firefox 和 iOS Safari 上进行了测试：
thead th { vertical-align: bottom; text-align: center; width: 0.5em; min-width: 0.5em; padding: 0; } thead th span { writing-mode: vertical-lr; transform: rotate(180deg); /* slight horizontal offset to suit tastes */ position:relative; left:-2px; } /* need following (or explicit width) or else the */ /* cells in the rows will force wrap every word */ tbody th { white-space:nowrap } /*************** unrelated formatting ***************/ table { border-collapse:collapse; margin:1em auto } thead th { font-size:90% } thead th span { opacity:0.5 } th, td { vertical-align:middle; padding:0 0.5em } th { text-align:right; font-weight:normal } .yes { color:#090; font-weight:bold } .maybe { color:#660 } .no { color:#600 } tr > * { border-bottom:1px solid rgba(0,0,0,0.2)} tr:last-child > * { border-bottom: 0 }