Angular中类为inner-table的嵌套表格tr设置border-bottom不显示怎么办

数据老陈

2026-10-1

嵌套表格 tr 下边框无法显示修复方案

问题根因

默认状态下<table>的border-collapse属性为separate，该模式下<tr>元素的边框属性不会生效
当前HTML结构不符合表格规范：<tr>为行容器，不能直接放置文本内容，必须嵌套<td>/<th>元素才能正常渲染样式和内容
text-overflow、overflow、white-space这类文本裁剪属性不支持作用在<tr>上，需要绑定到单元格<td>才会生效

修复代码

修正后HTML

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

修正后CSS

/* 给内层表格设置边框合并 */
.inner-table {
  border-collapse: collapse;
  width: 100%; /* 可根据实际需求调整宽度 */
}

.inner-table tr {
  line-height: 2;
  border-bottom: 1px solid black;    
}

/* 文本溢出属性放到td上 */
.inner-table td {
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;
}