nested table border-bottom not displaying-CodePudding

I have an nested table (class="inner-table") in angular but while using border-bottom to the tr it is not displayed

<table>
   <td>
       <table class="inner-table">
          <tr>row1</tr>
          <tr>row2</tr>
       </table>
   </td>
</table>


CSS
.inner-table tr{
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    line-height: 2;
    border-bottom: 1px solid black;    
}

CodePudding user response：

tr borders are only obeyed in collapsed border mode. See inline style attribute on the inner table below.

.inner-table tr{
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    line-height: 2;
    border-bottom: 1px solid black;    
}

<table>
   <td>
       <table class="inner-table" style="border-collapse: collapse">
          <tr><td>row1</td></tr>
          <tr><td>row2</td></tr>
       </table>
   </td>
</table>