如何在<table> <tbody> <tr> <td>中与其余</td> <td>对齐

时间:2018-09-19 02:17:01

标签: html html-table

我有一个包含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>

这是屏幕截图

enter image description here

我想看看

测试数据3.1在测试数据3下

测试数据3.2在测试数据4下

测试数据3.3位于测试数据5

3 个答案:

答案 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>

我认为您可以通过三种方式做到这一点:

  1. 只需在主表中创建第二行,并为前两列提供rowspan="2"。我不知道您的表中是否有任何特定的原因。
  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>

输出 enter image description here

答案 2 :(得分:-1)

仅使用一个带有colspan和rowspan的表