嵌套 table 底部边框不显示

Question

我在 angular 中有一个嵌套的 table (class="inner-table") 但是当使用 border-bottom 到 tr 时它没有显示

<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;    
}

Answer 1

tr 边框仅在折叠边框模式下遵守。请参阅下面内部 table 的内联样式属性。

.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>

嵌套 table 底部边框不显示

nested table border-bottom not displaying

css

html-table

angular

mat-table