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:
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.
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.