javascripthtmlcssangularjsngtable

html table styling, angular, ngTable


I am trying to display some information in a table, but I'm having a hard time to make it look presentable, I don't want it to look too stale and dull. Right now I'm using angular with ngTable, this is the table I'm working on:

<table ng-table="indexTable" class="table" >
<tr ng-repeat="item in items">
    <td data-title="'ID'">
        {{item.id}}
     </td>
     <td data-title="'Title'">
        {{item.title}}
     </td>
     <td data-title="'Date'">
        {{item.created | date:'dd-MM-yyyy'}}
     </td>
     <td data-title="'Index'">
        {{item.index}}
     </td>
     <td data-title="'Status'">
        {{item.statusForTiltak}}
     </td>
</tr>

In my .css file I started out with this: (from ngTable website)

.ng-table {
border: 1px solid #000;

}

But as soon as I try to edit something it looks horrible, I have follwed some tutorials over at w3schools, but that's just basic stuff I can't put together into something nice. What techniques are there to style tables? Can someone point me in the right direction, whether it's tutorials or examples, I need some help.

Okey, so what I wanted to be able to make looks really simple, but I don't believe it is. This is somewhat how I picture it:

enter image description here

Specifically what I need help with is two things:

The problem I think is to limit the description column, is this even possible? I don't want it to be scrollable, I will have another way of viewing the whole text in that column.

Update: I managed to set the 'width' I wanted, along with removing the border under each row, by setting this on each td :

ng-style="{'width': '40%', 'border': 'none'}"

I don't know why, but I was unable to do it within the .css file.

I still need to figure out how I can limit the text on the 'description' column, I have tried setting 'overflow' to 'hidden', but no luck.


Solution

  • So I finally managed to get this right, in order to remove the lines between rows I had to set an 'ng-style' on each td:

    ng-style="{'width': '40%', 'border': 'none'}"
    

    This is from the 'title' row (it's not 40% on each)

    And to limit the description column I had to make the table fixed:

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

    And lastly on I set the text-overflow

    #actionTable td{
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    

    Note. This will make all columns limited, but I am fine with that.