使用超文本标记语言和CSS3 :如何垂直扩展内层表格的边框，使其与外层表格接触
使用超文本标记语言和CSS3 :如何垂直扩展内层表格的边框，使其与外层表格接触
提问于 2018-05-28 12:47:14
<!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
Stack Overflow用户
回答已采纳
发布于 2018-05-28 13:20:41
请检查是否有更新的html。我去掉了多余的样式。在表格上添加了边框属性，并在创建空格的元素上添加了padding0(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>
请参阅代码here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50559269
复制相关文章
相似问题