javascript - Why td max-width does not work in this case?

Here is my HTML:

<div class="table-wrapper" ng-app="groupModule">

    <table class="tablify stylable" ng-controller="listController">

        <thead>

            <tr>
                <th>Group Name</th>
                <th>Parent Group</th>
                <th>Effect</th>
                <th class="col-actions">Edit</th>
                <th class="col-actions">Delete</th>
            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="group in groups">

                <td>{{ group.groupName }}</td>
                <td>{{ group.parentGroupName }}</td>
                <td>{{ group.effect }}</td>
                <td class="col-actions">
                    <button type="button" class="btn btn-info btn-edit"></button>
                </td>
                <td class="col-actions">
                    <button type="button" class="btn btn-danger btn-delete"></button>
                </td>

            </tr>


        </tbody>

    </table>

</div>

Here is my CSS:

.table-wrapper {
  overflow-y: auto;
  height: 75%;
}

table.stylable {
    text-align: center;
    width: 100%;
}

table.stylable th {
    padding: 5px 0;
    text-align: center;
    background-color: #353535;
    color: white;
    border-right: 1px solid #DDD;
    height: 40px;
    cursor: pointer;
    cursor: hand;
}

table.stylable tr {
    background-color: #EEE;
}

table.stylable td {
  background-color: transparent;
  border-right: 1px solid #DDD;
}
table.stylable th:last-child,
table.stylable td:last-child {
    border-right: 0px;
}

table.stylable tr th:first-child {
    border-top-left-radius: 6px;
}

table.stylable tr th:last-child {
    border-top-right-radius: 6px;
}

table.stylable tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

table.stylable tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

table.stylable tr:hover:not(.row-details):not(.selected) {
    background-color: #AAA;
    color: white;
}

table.stylable tr.selected {
    background-color: #777;
    color: white;
}

table.stylable tr:hover td {
    background-color: transparent;
}

table.stylable tr.selected td {
    background-color: transparent;
}

table.stylable table {
    width: 100%;
}

table.stylable td,
table.stylable th
{
    padding: 3px 8px;
    min-width: 65px;
}

.btn-edit,
.btn-delete
{
    position: relative;
    margin: 5px;
    border: none;
    width: 60%;
    padding: 0;
    padding-bottom: 60%;
    height: 0;
    background-size: contain;
}

.btn-edit {
    background-image: url(../images/Edit.png);
}

.btn-delete {
    background-image: url(../images/Delete.png);
}

.col-actions
{
    max-width: 80px;
}

If anybody wants then here is angular code:

var groups = [{groupCode: 1, groupName: "Branch / Divisions"},
              {groupCode: 2, groupName: "Capital Account", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 3, groupName: "Current Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 4, groupName: "Current Liabilities", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 5, groupName: "Direct Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 6, groupName: "Direct Ines", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 7, groupName: "Fixed Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 8, groupName: "Indirect Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 9, groupName: "Indirect Ines", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 10, groupName: "Investments", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 11, groupName: "Loans (Liability)", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 12, groupName: "Misc. Expenses (Asset)", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 13, groupName: "Purchase Accounts", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 14, groupName: "Sales Accounts", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 15, groupName: "Suspense A/c", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 16, groupName: "Bank Accounts", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 17, groupName: "Bank OD A/c", alias: "Bank OCC A/c", parentGroupCode: 11, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 18, groupName: "Cash-in-hand", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 19, groupName: "Deposits (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 20, groupName: "Duties & Taxes", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 21, groupName: "Loans & Advances (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 22, groupName: "Provisions", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 23, groupName: "Reserves & Surplus", alias: "Retained Earnings", parentGroupCode: 2, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}];

angular.module('groupModule', [])
       .controller("listController", function($scope){
           $scope.groups = groups.map(function(g){ return {
               groupCode: g.groupCode,
               groupName: g.groupName,
               parentGroupName: groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0] == undefined ? 'Primary' : groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0].groupName,
               nature: g.natureOfGroup == undefined ? '' : g.natureOfGroup.nature,
               effect: g.effectOfGroup == undefined ? '' : g.effectOfGroup.effect
           }});
       });

Here is the JSFiddle reproducing issue:

Here is my HTML:

<div class="table-wrapper" ng-app="groupModule">

    <table class="tablify stylable" ng-controller="listController">

        <thead>

            <tr>
                <th>Group Name</th>
                <th>Parent Group</th>
                <th>Effect</th>
                <th class="col-actions">Edit</th>
                <th class="col-actions">Delete</th>
            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="group in groups">

                <td>{{ group.groupName }}</td>
                <td>{{ group.parentGroupName }}</td>
                <td>{{ group.effect }}</td>
                <td class="col-actions">
                    <button type="button" class="btn btn-info btn-edit"></button>
                </td>
                <td class="col-actions">
                    <button type="button" class="btn btn-danger btn-delete"></button>
                </td>

            </tr>


        </tbody>

    </table>

</div>

Here is my CSS:

.table-wrapper {
  overflow-y: auto;
  height: 75%;
}

table.stylable {
    text-align: center;
    width: 100%;
}

table.stylable th {
    padding: 5px 0;
    text-align: center;
    background-color: #353535;
    color: white;
    border-right: 1px solid #DDD;
    height: 40px;
    cursor: pointer;
    cursor: hand;
}

table.stylable tr {
    background-color: #EEE;
}

table.stylable td {
  background-color: transparent;
  border-right: 1px solid #DDD;
}
table.stylable th:last-child,
table.stylable td:last-child {
    border-right: 0px;
}

table.stylable tr th:first-child {
    border-top-left-radius: 6px;
}

table.stylable tr th:last-child {
    border-top-right-radius: 6px;
}

table.stylable tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

table.stylable tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

table.stylable tr:hover:not(.row-details):not(.selected) {
    background-color: #AAA;
    color: white;
}

table.stylable tr.selected {
    background-color: #777;
    color: white;
}

table.stylable tr:hover td {
    background-color: transparent;
}

table.stylable tr.selected td {
    background-color: transparent;
}

table.stylable table {
    width: 100%;
}

table.stylable td,
table.stylable th
{
    padding: 3px 8px;
    min-width: 65px;
}

.btn-edit,
.btn-delete
{
    position: relative;
    margin: 5px;
    border: none;
    width: 60%;
    padding: 0;
    padding-bottom: 60%;
    height: 0;
    background-size: contain;
}

.btn-edit {
    background-image: url(../images/Edit.png);
}

.btn-delete {
    background-image: url(../images/Delete.png);
}

.col-actions
{
    max-width: 80px;
}

If anybody wants then here is angular code:

var groups = [{groupCode: 1, groupName: "Branch / Divisions"},
              {groupCode: 2, groupName: "Capital Account", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 3, groupName: "Current Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 4, groupName: "Current Liabilities", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 5, groupName: "Direct Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 6, groupName: "Direct Ines", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 7, groupName: "Fixed Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 8, groupName: "Indirect Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 9, groupName: "Indirect Ines", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 10, groupName: "Investments", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 11, groupName: "Loans (Liability)", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 12, groupName: "Misc. Expenses (Asset)", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 13, groupName: "Purchase Accounts", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 14, groupName: "Sales Accounts", natureOfGroup: {natureOfGroupCode: 3, nature:"Ines"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 15, groupName: "Suspense A/c", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 16, groupName: "Bank Accounts", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 17, groupName: "Bank OD A/c", alias: "Bank OCC A/c", parentGroupCode: 11, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 18, groupName: "Cash-in-hand", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 19, groupName: "Deposits (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 20, groupName: "Duties & Taxes", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 21, groupName: "Loans & Advances (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 22, groupName: "Provisions", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 23, groupName: "Reserves & Surplus", alias: "Retained Earnings", parentGroupCode: 2, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}];

angular.module('groupModule', [])
       .controller("listController", function($scope){
           $scope.groups = groups.map(function(g){ return {
               groupCode: g.groupCode,
               groupName: g.groupName,
               parentGroupName: groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0] == undefined ? 'Primary' : groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0].groupName,
               nature: g.natureOfGroup == undefined ? '' : g.natureOfGroup.nature,
               effect: g.effectOfGroup == undefined ? '' : g.effectOfGroup.effect
           }});
       });

Here is the JSFiddle reproducing issue:

https://jsfiddle/Vishal1419/n7qmt8wt/

Share Improve this question edited Aug 4, 2016 at 6:03 asked Aug 4, 2016 at 5:54 Vishal 6,37814 gold badges89 silver badges164 bronze badges

assign max-width to <th> instead of <td> – Gaurav Aggarwal Commented Aug 4, 2016 at 5:59
There is not a single instance of max-width in your css. – Adrian Brand Commented Aug 4, 2016 at 5:59
@GauravAggarwal I have already applied max-width to th. Can you see col-actions class? that is applied to th and td both. – Vishal Commented Aug 4, 2016 at 6:02
@AdrianBrand There is col-actions class. See its max-width in css. – Vishal Commented Aug 4, 2016 at 6:02
@GauravAggarwal I have updated my question with jsfiddle link – Vishal Commented Aug 4, 2016 at 6:04

| Show 6 more ments

2 Answers 2

Sorted by: Reset to default 14

For table cells the width property should be used, as the 'min-width' and 'max-width' is undefined for table cells. See the specification:

The effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

You just have to remember that cells shrink also below the given width since CSS caluclates the width of the cells depending on the table's width and the cells content.

So what you can use is the fixed table layout what will change the algorithm behind the width calculation.

But what I usually do is to make my own grid with div elements, instead of using tables (because of their weird behavior).

This is happening because you have already applied width:100% in table and td or th will decide their width dependent to table width.

For this you have to remove width:100% from table only then you would be able to apply max-width or min-width in td/th

See this fiddle : https://jsfiddle/n7qmt8wt/3/

Another good option people use for table is

table {
  width: 100%;
  table-layout: fixed;
}

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

fixed value: Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

This totally depends on you that you would use this or not but this is a great method to keep the table 100% wide with each <td> or <th> with same size.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why td max-width does not work in this case? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)