Question

 <!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 ng-repeat="r2 in records2" style="text-align: center;height:100%;border-width : 1px; border-color:black black black black; border-style:solid solid solid solid;">
    <table style="border-collapse:collapse; margin: 12px 40px -2px -11px;width:100%;height:100%;border-width : 1px;">
<!-- here the margin needs to be modified in such a way that the inner table's border touches the outer table --> 
    <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>

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

需要修改内部表的边距，使内部表的边框接触外部表。在此先感谢

Answer 1

请检查更新的html。我删除了额外的样式。在表上添加了border属性，并在创建空格（td）的元素上添加了填充：0。

  <!DOCTYPE html>
<html>
<head>
</head>
<style>
   table * {
   	border-spacing: 0;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="1" style="border-collapse: collapse;">
   <tr>
       <td ng-repeat="r2 in records2" style="text-align: center;height:100%;padding: 0;">
            <table border="1">
                <!-- here the margin needs to be modified in such a way that the inner table's border touches the outer table --> 
                <tr>

                    <td ng-repeat="r3 in records3" style="height:100%; border: 0;padding: 0">
                        <table style="width:100%;height:100%;border-right: 1px solid;">
                            <tr>
                                <td  height="100%"  style="padding: 5px;" ng-repeat="r1 in records1">
                                    <div>
                                        <span>
                                            <span>
                                                <span>
                                                    <a> {{r1}}
                                                    </a>
                                                </span>
                                            </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>

请参阅代码here

使用HTML＆amp; CSS3：如何垂直扩展内部表的边框，使其接触外部表

1 个答案: