如何對齊 <table> 在 <td> 休息 <td> 的
[英]How to align <table> in <td> with rest <td>'s
問題描述
我有一個包含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下
3 個解決方案
解決方案1
0 2018-09-19 02:25:28
.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％。）我添加了一個代碼段，演示了如何完成此操作：）
希望其中之一可以對您有所幫助:)
解決方案2
0 2018-09-19 02:28:35
在第一個tr前兩個td中使用rowspan
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>
輸出值
解決方案3
-1 2018-09-19 02:24:44
僅使用一張帶有colspan和rowpan的表
在表格中對齊“ td”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.