Functional issues with table tr:first-child td
I used CSS and tables to place the fraction line between the numerator and denominator. It doesn't work properly on Ant browser for complex fractions. Below is sample code used in the try it editor that shows the problem. There is an unwanted border below the letter C. But something like the coded letter F will do. I tried 4 browsers and all had the same problem. There is a workaround to add style="border:none" to the problem < td > (adding a class doesn't work), but why do I need to do this? postscript. Yes, I know <math> but it's too clunky for me.
<!DOCTYPE html>
<html>
<head>
<style>
table {display:inline-table; vertical-align:middle}
table tr:first-child td {border-bottom:solid black}
td {vertical-align:middle>
</style>
</head>
<body>
V = <table>
<tr> <td>A + <table>
<tr> <td>B</td></tr>
<tr> <td>C</td></tr></table></td></tr>
<tr> <td>D + <table>
<tr> <td>E</td></tr>
<tr> <td>F</td></tr></table>
</td></tr></table>
</body>
</html>