我有一个包含5列的表格。我在第3列中创建了一个内部表,该表有3列。我想将这3列与父母的其余3列对齐。有可能吗?
重要说明:我必须使用Table in Table,因为我是使用AngularJs创建的。我不知道该表的确切行数
这是我的HTML
<table style="width: 100%" border="1">
<tr>
<td style="width: 20%"> Test Data 1</td>
<td style="width: 20%"> Test Data 2</td>
<td style="width: 20%"> Test Data 3
<table border="1">
<tr>
<td style="width: 20%"> Test Data 3.1</td>
<td style="width: 20%"> Test Data 3.2</td>
<td style="width: 20%"> Test Data 3.3</td>
</tr>
<tr>
<td style="width: 20%"> Test Data 3.1-1</td>
<td style="width: 20%"> Test Data 3.2-1</td>
<td style="width: 20%"> Test Data 3.3-1</td>
</tr>
</table>
</td>
<td style="width: 20%"> Test Data 4</td>
<td style="width: 20%"> Test Data 5</td>
</tr>
</table>
这是屏幕截图
我想看看
测试数据3.1在测试数据3下
测试数据3.2在测试数据4下
测试数据3.3位于测试数据5
下答案 0 :(得分:0)
.td {
overflow:visible;
}
.overflow {
margin-left:-4px;
width: 60%;
position:absolute;
}
<table style="width: 100%" border="1">
<tr>
<td style="width: 20%"> Test Data 1</td>
<td style="width: 20%"> Test Data 2</td>
<td style="width: 20%"> Test Data 3
<table class="overflow">
<tr>
<td style="width: 33%"> Test Data 3.1</td>
<td style="width: 33%"> Test Data 3.2</td>
<td style="width: 33%"> Test Data 3.3</td>
</tr>
<tr>
<td style="width: 33%"> Test Data 3.1-1</td>
<td style="width: 33%"> Test Data 3.2-1</td>
<td style="width: 33%"> Test Data 3.3-1</td>
</tr>
</table>
</td>
<td style="width: 20%"> Test Data 4</td>
<td style="width: 20%"> Test Data 5</td>
</tr>
</table>
我认为您可以通过三种方式做到这一点:
rowspan="2"
。我不知道您的表中是否有任何特定的原因。overflow: visible;
,并将第二个表格列的宽度设置为100%,应该有可能将它们排列起来。 (请注意,它的宽度为100%,因为它将其设置为父容器的完整宽度,该宽度已经是表宽度的20%。)我添加了一个代码段,演示了如何完成此操作:)希望其中一个能对您有所帮助:)
答案 1 :(得分:0)
在前rowspan
的前两个td
中使用tr
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
$scope.arr = [{ id: 1, data1: "Test Data 1", data2: "Test Data 2", data3: 'Test Data 3', data4: 'Test Data 4', data5: 'Test Data 5', rowspan: 2 },
{id: 2, data3: 'Test Data 3.1', data4: 'Test Data 3.2', data5: 'Test Data 3.3' }];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="mainCtrl">
<table style="width: 100%" border="1">
<tr ng-repeat="val in arr">
<td style="width: 20%" ng-hide="$index>0" rowspan="{{val.rowspan}}">{{ val.data1 }}</td>
<td style="width: 20%" ng-hide="$index>0" rowspan="{{val.rowspan}}">{{ val.data2 }}</td>
<td style="width: 20%">{{ val.data3 }}</td>
<td style="width: 20%">{{ val.data4 }}</td>
<td style="width: 20%">{{ val.data5 }}</td>
</tr>
</table>
</div>
</body>
</html>
答案 2 :(得分:-1)
仅使用一个带有colspan和rowspan的表