Menu
I tried to create a table in AngularJS with sticky header and footer. I've managed to do that; here's a Plunker demo and code:
<body ng-controller="MainCtrl as ctrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</thead>
<tbody>
<tr class="info" ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
{{item.type}}
</td>
<td>
{{item.value}}
</td>
<td>
{{item.code}}
</td>
<td>
{{item.id}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</tfoot>
</table>
</body>
But the only problems are:
Any idea how to fix this?
654
Table data defaults to left alignment; table headers to center. In order to change the alignment in one cell, insert the appropriate "ALIGN=" attribute within the code for that cell. In order to change the alignment in all cells in a row, insert the appropriate alignment attribute within the code for that row.
To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following. Changing the style attribute in the <table> tag, as shown above, results in the table being centered on the web page, as shown below.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
The criteria for success of this question are:
What you want is impossible.
The reason why the cells are almost right is because the table is semi-there, but there are actually multiple tables in the document. By overriding the <table> elements display type to flex, you've rendered the page in several different groups. The <thead> and <tfoot> are their own table, and their <tbody> is its own table. They do not size to one another, rather to other table cells in their own group.
Other CSS guides about this topic require a fixed width. http://joshondesign.com/2015/05/23/csstable
After playing around with it (specifically, trying to move the thead and tfoot to fixed positions), I've decided that any attempt to give specific rules to the header/footer breaks the table layout and will cause the sizing to work differently, which is why fixed width is required on the cells. Even in the examples, they are broken in this way, but the fixed width nullifies the problem.
Your absolute easiest fix is to fix the widths and give them overflow-x properties.
The alternative is to use JavaScript. With JS, all bets are off, and you can do anything you imagine. Specifically, you could use JS to autosize cells. I remember having success with a jQuery plugin that accomplished that.
https://www.datatables.net/
Otherwise, no. I cannot find any example online that does what you need it to do. Any attempts to get this specific layout working is a hack and you're better off making a no-JS version with overflow-x cells and fixed widths, and a JS-enabled version that autosizes cells.
89
As you already know from the other answers, you should remove white-space: nowrap;, but there's also something you can do about the scrollbar:
table thead, table tfoot {
width: calc(100% - 17px);
}
Updated Plunker
this looks perfect on my PC because the Windows scrollbars are 17px broad. If you want to be safe and check the scrollbar width, use this:
window.onload = function() {
var tr = document.getElementById("__tbody").children[0];
var scrWidth = window.innerWidth - tr.clientWidth - 3;
var width = "calc(100% - " + scrWidth + "px)";
document.getElementById("__thead").style.width = width;
document.getElementById("__tfoot").style.width = width;
}
This calculates how broad the scrollbars are and then adjusts thead and tfoot. Of course then you have to set the ids <thead id="__thead">, <tbody id="__tbody"> and <tfoot id="__tfoot">.
40
In order to return the table back to its normal, dynamically-resizing self, there are a few steps to follow. Each step mentioned will give freedom back to its respective table elements, making their lives much simpler.
First, remove all instances of flex. You want the table to act like a table, right? Next, let your thead, tr, and tfoot be themselves as well. Why make them display as a table? Lastly, your tbody is being set to display as a block. This, in a sense, segregates it from its other table friends, namely thead and tfoot. This creates a lonely situation for everyone involved.
Your final code will look like this:
table {
table-layout: auto;
max-height: 300px;
}
table thead, table tfoot,
table tbody tr {
table-layout: fixed;
}
tbody td,
thead th,
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
white-space: nowrap;
}
table thead {
width: 100%;
}
table tfoot {
width: 100%;
}
table tbody {
overflow-y: auto;
}
table tbody tr {
width: 100%;
}
This will allow your table cells to be themselves--dynamically resizing as they see fit.
4
Remove
white-space: nowrap;
and add
word-wrap: break-word;
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
word-wrap: break-word;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
