Table column width must be same for two tables html

Question

There are two tables in the below example. Width is not set for the columns. I dont want the fixed width for the columns in two tables. I want to make columns width same depending upon the dynamic text generated. I am using angularjs and html for this. Here is the plunkr - https://plnkr.co/edit/AhS2AmL5O6QxZaHNAzPp?p=preview

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>

In the above plunkr the child table columns are not in sync with the parent table columns. I want both the table columns with same width depending on the text of column. Let me know still you need more requirements. — shaaa, Jan 06 '17 at 05:54

Ced · Answer 1 · 2017-01-06T06:38:25.743

0

I think this is what you want, change width into max-width:

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

don't forget to comment out the width.

See plnkr: https://plnkr.co/edit/gYWusE9tqMX6D76bhcmW?p=preview

You can also use 60%. so: max-width: 60%

edited Jan 06 '17 at 06:38

answered Jan 06 '17 at 06:32

Ced

15,847
14
87
146

On adding max-width: 15rem; it is actually fixing the width and space is showing between the columns when the text size reduced. See this plunkr - https://plnkr.co/edit/gYWusE9tqMX6D76bhcmW?p=preview. I want the columns to be adjustable. Any other help? – shaaa Jan 06 '17 at 07:28

score 0 · Answer 2 · answered Jan 06 '17 at 06:41

0

If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:

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

answered Jan 06 '17 at 06:41

Aswin Arshad

90
1
11

Refer to this post : http://stackoverflow.com/questions/12190266/table-column-width-must-be-same-for-two-tables – Aswin Arshad Jan 06 '17 at 06:42

Table column width must be same for two tables html

2 Answers2