html table styling, angular, ngTable

Question

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:

Specifically what I need help with is two things:

Removing the lines below each row
Limit the description column

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.

In your CSS, you should either use table[ng-table] or table.table as the selector. Also, can you be more detailed on what your table should look like? — G_hi3
– G_hi3, Commented Aug 7, 2015 at 9:33
I can draw up something, but it could take a while (dont have tools here), I'm not looking for something specific though, just some suggestions maybe. I think part of my problem is that I'm not creative, but as I said, I will try and draw a sketch — sch
– sch, Commented Aug 7, 2015 at 10:02
Can you try with table[ng-table] instead of .ng-table in your css? — SerCrAsH
– SerCrAsH, Commented Aug 9, 2015 at 21:12
yeah I did that, it's the same result, but it works if that's what you were asking. But the 'border' thing I have removed now, as yu can see in the image I want as little borders as possible — sch
– sch, Commented Aug 10, 2015 at 6:04

sch · Accepted Answer · 2015-08-13 07:39:19Z

1

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.

answered Aug 13, 2015 at 7:39

sch

1,3985 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html table styling, angular, ngTable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related