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 Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, 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 Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, 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:"Incomes"}, 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:
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).