Functional issues with table tr:first-child td
P粉590929392
P粉590929392 2024-03-30 13:24:05
0
1
496

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>

P粉590929392
P粉590929392

reply all(1)
P粉399585024

You are targeting all td elements within the tr element that is the first child element.

C is within the first tr of the table and therefore becomes the target, despite the fact that it is also within another table and tr.

If you want to be more specific, make sure to select only the td that are direct children of the first child tr , and then the C will lose its underlining.




  



  V =
  
A +
B
C
D +
E
F
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template