使用CSS表格实现分数线时复杂分数出现异常边框问题求助

核心问题1：多余边框的来源 #

你写的CSS选择器 table tr:first-child td 会匹配所有table元素里第一个tr下的td。看你的结构：

• 外层大table的第一个tr里的td，也会被这个选择器命中，给它加上下边框。而这个td里嵌套了小table（就是B/C的分数），所以这个td的下边框刚好落在C的下方，看起来像是C下面多了线。
• 而F所在的是大table第二个tr里的td，不在tr:first-child范围内，所以没这个问题。

核心问题2：类无效但inline style管用 #

这是CSS优先级的问题：

• 你的选择器 table tr:first-child td 是3个元素选择器组合，权重为0,0,0,3。
• 如果你只加一个普通类（比如.no-border），权重是0,0,1,0，优先级低于前者，所以样式不生效。
• 而inline style（style="border:none"）的权重是1,0,0,0，优先级远高于元素选择器，所以能覆盖原有边框。

另外你的CSS里还有个语法错误：td {vertical-align:middle> 少了闭合的}，虽然浏览器可能容错，但最好补上。

不用Math标签的修复方案 #

方案1：精准选择分数table #

给所有用来做分数的小table加个类（比如fraction），然后修改CSS选择器，只给这些table的第一个tr下的td加边框：

table {display:inline-table; vertical-align:middle}
/* 只给分数table的第一个tr td加边框 */
table.fraction tr:first-child td {border-bottom:solid black}
td {vertical-align:middle;} /* 补上闭合花括号 */

对应的HTML修改：

<table class="fraction">
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
</table>

这样外层大table的td就不会被选中加边框，自然就消除了C下方的多余线。

方案2：提高类的优先级 #

如果不想调整选择器，给需要去掉边框的td加类，同时让类的优先级足够高：

table tr:first-child td {border-bottom:solid black}
/* 元素选择器+类的组合，权重超过原有选择器 */
td.no-border {border:none;}

然后给外层大table第一个tr的td添加class="no-border"即可。

内容的提问来源于stack exchange，提问作者Howard Cary Morris