Использование HTML & CSS3: как расширить границы внутренней таблицы по вертикали, чтобы она касалась внешней таблицы - PullRequest
Новая
       1

Использование HTML & CSS3: как расширить границы внутренней таблицы по вертикали, чтобы она касалась внешней таблицы

0 голосов
/ 28 мая 2018 
 <!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>

поле внутренней таблицы необходимо изменить таким образом, чтобы граница внутренней таблицы касалась внешней таблицы.Заранее спасибо

1 Ответ

0 голосов
/ 28 мая 2018

Пожалуйста, проверьте, если обновленный HTML.Я удалил лишние стили.Добавлен атрибут border для таблиц, а также добавлены отступы: 0 для элементов, создающих пробел (td). 

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

См. Код здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...