Как выровнять <table>в <td>с остальными <td> - PullRequest
Новая
       5

Как выровнять <table>в <td>с остальными <td>

0 голосов
/ 19 сентября 2018

У меня есть таблица, которая имеет 5 столбцов.Я создал внутреннюю таблицу в 3-м столбце, и эта таблица имеет 3 столбца.Я хотел бы выровнять эти 3 столбца с остальными 3 столбцами родителя.Это возможно?

Важное примечание: я должен использовать таблицу в таблице, потому что я создаю это с помощью 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 голосов
/ 19 сентября 2018 

.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. Просто создайте вторую строку в главной таблице и введитепервые 2 столбца rowspan="2".Я не знаю, есть ли какая-то конкретная причина, по которой вам нужно иметь таблицу в вашей таблице.
  2. Будет сложно заставить ее выстроиться в линию так, как вы этого хотите, но если вы установите overflow: visible; дляячейка, в которой находится таблица, и установите ширину столбцов вторых таблиц на 100%, должна быть возможность выстроить их в линию.(Обратите внимание, что это ширина 100%, потому что это устанавливает его на полную ширину родительского контейнера, которая уже составляет 20% ширины таблицы.) Я добавил фрагмент, демонстрирующий, как это делается:)

Надеюсь, один из них вам немного поможет:)

0 голосов
/ 19 сентября 2018

используйте 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

0 голосов
/ 19 сентября 2018

Используйте только одну таблицу с colspan и rowspan

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...