使用HTML & CSS3：如何让内部表格边框垂直延伸至触碰外部表格

我来帮你搞定这个问题！你现在的核心需求是让嵌套的内部表格边框完全贴合外部表格的边框，主要踩坑点就在内部表格的margin设置以及外部单元格的默认样式上，下面是具体的解决方案和修改后的完整代码：

关键修改点 #

• 移除内部表格的偏移margin：原来的margin: 12px 40px -2px -11px会让内部表格和外部单元格边框产生间隙，直接设置为margin: 0就能让内部表格顶到外部td的边缘
• 清除外部td的默认padding：HTML表格的<td>默认带有 padding，这会导致内部表格和外部边框之间有空隙，必须在外部td的style中添加padding: 0
• 优化边框样式避免重复线条：调整内部表格和单元格的边框设置，确保边框合并后不会出现双重线条，同时保留你需要的垂直分隔效果

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="myCtrl"> 
  <table> 
    <tr> 
      <!-- 外部td添加padding:0，清除默认内边距 -->
      <td ng-repeat="r2 in records2" style="text-align: center;height:100%;border-width : 1px; border-color:black; border-style:solid; padding:0;"> 
        <!-- 内部表格设置margin:0，移除偏移 -->
        <table style="border-collapse:collapse; margin:0;width:100%;height:100%;border-width : 1px; border-color:black; border-style:solid;"> 
          <tr> 
            <td ng-repeat="r3 in records3" style="height:100%;border-width : 1px; border-color:white black white black; border-style:hidden solid hidden solid;"> 
              <table style="width:100%;height:100%;border-spacing: 2px 10px;">
                <tr> 
                  <td height="100%" style="border-style: hidden;" ng-repeat="r1 in records1"> 
                    <div> 
                      <span > 
                        <span> 
                          <span> 
                            <a> {{r1}} </a> 
                          </span> 
                        </span> 
                      </div> 
                    </td>
                  </tr>
                </table> 
              </td> 
            </tr> 
          </table> 
      </td> 
    </tr> 
  </table>
  <script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) { 
      $scope.records1 = [ "A", "B", "C", "E", ] 
      $scope.records2 = [ "1", "2", ] 
      $scope.records3 = [ "W", "M", ] 
    }); 
  </script> 
</body> 
</html>

额外说明 #

如果你需要保留内部表格在水平方向的间距，可以单独设置margin-left或margin-right，但垂直方向的margin-top和margin-bottom必须设为0，这样才能保证内部表格的上下边框完全触碰外部表格的边框。另外，我给内部表格也加上了明确的边框样式，确保和外部表格的边框对齐，避免出现边框断裂的情况。

内容的提问来源于stack exchange，提问作者Navya Nagaraj