テーブルの列の幅は2つのテーブルで同じでなければなりませんhtml

以下の例では2つのテーブルがあります。列の幅が設定されていません。私は2つのテーブルの列の固定幅が必要ない。私は生成された動的テキストに応じて列の幅を同じにしたい。私はこれにangularjsとhtmlを使用しています。ここでplunkrがある - https://plnkr.co/edit/AhS2AmL5O6QxZaHNAzPp?p=preview テーブルの列の幅は2つのテーブルで同じでなければなりませんhtml

HTML-

<html> 
<head> 
<script src="angular.min.js"></script> 

<script src="script.js"></script> 
<link rel="stylesheet" href="style.css"/> 
<link rel="stylesheet" href="font-awesome.min.css"/> 
<link rel="stylesheet" href="bootstrap.min.css" /> 
</head> 
<body data-ng-app="testApp" data-ng-controller="treeTable"> 

<hr> 
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button> 
<div class="row"> 
<div class="col-md-9"> 
<div class="tableheight"> 
    <table class="table-nested childtable"> 
    <thead> 
     <tr> 
     <!-- <th > 
      <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> 
     </th> --> 
     <th > 
     <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name 
     </th> 
     <th class="cell-members"> 
      Version 
     </th> 
     <th class="cell-members"> 
      Size 
     </th> 
     <th class="cell-members"> 
     Modified By 
     </th> 
     <th class="cell-members"> 
     Labels 
     </th> 
     <th class="cell-members"> 
     Description 
     </th> 
     </tr> 
    </thead> 
    <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list"></tbody> 
    </table> 
    </div> 
    <script id="table_tree.html" type="text/ng-template"> 
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)"> 

     <td class="cell-name top-border" ng-if="level &amp;&amp; level &gt; 1"> 
     <span style="padding-left: 30px" >&nbsp; <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /> 
     {{item.name}} </span> 
     </td> 
<td class="cell-name top-border" ng-if=" &#40;&#33;level &amp;&amp; level &lt;&#61; 1 &#41; &#124;&#124 &#40;level &amp;&amp; level &lt;&#61; 1&#41;"> 
     <span style="padding-left:11px" ng-click="item.opened = !item.opened"></span>&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /> 
     {{item.name}} 
     </td> 

<td class="cell-name top-border" ng-if="&#33;level"> 
     <span class="indent" ng-click="item.opened = !item.opened"></span>&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /> 
     {{item.name}} 
     </td> 

     <td class="cell-members"> 
     {{item.Version}} 
     </td> 
     <td class="cell-members"> 
     {{item.Size}} 
     </td> 
     <td class="cell-members"> 
     {{item.ModifiedBy}} 
     </td> 
    <td class="cell-members"> 
     {{item.Labels}} 
     </td> 
<td class="cell-members"> 
     {{item.Description}} 
     </td> 
    </tr> 
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0"> 
     <td colspan="6"> 
     <table class="childtable"> 
      <tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody> 
     </table> 
     </td> 
    </tr> 
    </script> 
</div> 
</div> 
</body> 
</html>

出典

2017-01-06 shaaa

詳細plz – Ced

上記のplunkrでは、子テーブルの列と親テーブルの列が同期していません。私は、列のテキストに応じて同じ幅の両方のテーブルの列をしたい。あなたはまだもっと多くの要件が必要であることを私に教えてください。 – shaaa

私はこれが最大幅への変更は、幅、あなたが欲しいものだと思う：

.table-nested .cell-name { 
    max-width: 15rem; 
    /*width: 60%;*/ 
}

は幅をコメントアウトすることを忘れないでください。

参照くださいplnkr：https://plnkr.co/edit/gYWusE9tqMX6D76bhcmW?p=preview

また、60％を使用することができます。そう：あなたがしたい場合max-width: 60%

出典

2017-01-06 06:32:51 Ced

max-width：15remの追加時。実際には幅を固定しており、テキストサイズが縮小されたときに列間にスペースが表示されます。このplunkr - https://plnkr.co/edit/gYWusE9tqMX6D76bhcmW?p=previewを参照してください。私は列を調整可能にしたい。その他のヘルプ？ – shaaa

は、すべての列は同じ幅であり、そしてあなたが各テーブルで正確に5つの列を持っているだろうことを確信しているから、私はお勧めします：要件の

<table style="table-layout:fixed"> 
<col style="width:20%" span="5" /> 
<tr><!--stuffs...--></tr> 
</table>

出典

2017-01-06 06:41:13

この記事を参照してください：http://stackoverflow.com/questions/12190266/table-column-width-must-be-same-for-two-tables –

テーブルの列の幅は2つのテーブルで同じでなければなりませんhtml

答えて

関連する問題