search

Home  >  Q&A  >  body text

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>

P粉590929392P粉590929392238 days ago438

reply all(1)I'll reply

  • P粉399585024

    P粉3995850242024-03-31 12:24:56

    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

    reply
    0
  • Cancelreply