个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
<!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>
需要修改内表的边距，使内表的边框接触到外表。提前致谢
最佳答案
请检查是否更新了 html。我删除了额外的样式。在表格上添加了 border 属性，还在创建空间 (td) 的元素上添加了 padding: 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 - 使用 HTML & CSS3 : How to extend the borders of the inner table vertically, 使其触及外表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50559269/
25
4
0
我是一名优秀的程序员,十分优秀！