I am having trouble to fix the header of a table, here is my issue:
I used the same code from this post:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
It is almost working, but the problem is the width of the header changed when I scroll down.
I wonder what I am doing wrong. I tried the following code to fix the width, but does not work.
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
Here is the link:
http://vvb.me/test.html
The width of table cells is determined by not only the content of that particular table cell, but also the other cells in the same vertical column as it. This is because tables form blocks so the widths of the columns must line up.
What's happening here is that the calculated width of your attached thead cells is different from the widths calculated for your detached, fixed thead cells.
In the attached thead, the widths of the cells are largely determined by the data below. In the second instance, which isn't attached to the tbody, the width is solely determined by the header tds.
One solution would be to specify the width of the cells in both theads. As an example, specifying,
<td style='...; width: 50px;'>
on all of your thead cells would make them equal.
You could also use javascript to determine the width of each attached thead cell and set the bottom thead cells to be equal to their corresponding cell. Calculating the dimensions of DOM elements can be done with Javascript/Jquery. Check out answers like this one for methods on how to do that.
Related
In HTML <table>
Using Javascript, i want to make square (or nearly square) the tallest cell (having max no. of lines) in every row, which results in decreasing rows height and make table compact.
Link: http://jsfiddle.net/okoer70u/ . See unnecessary white-space in ROWS, if we add white-space:nowrap to table then columns will have extra white-space.
All my tables are wider than screen and totally different cells text length and no. of cells so i can't use css like width min-width etc.
fyi, I am not using jquery.
What about wrapping the text inside the cells in a div. then count characters to find biggest?
please help
Here's some background info before I get to my question...I am implementing a JavaScript library for supporting HTML tables that have scrollable bodies and stationary headers.
Requirements:
The table layout must work the same as in a normal table; the column sizes should grow or shrink to fit the contents
Multi-row headers must be supported along with reasonable use of colspan and rowspan therein.
The library should work on virtually any table, provided that the table adheres to the structure prescribed by the ScrollTable library.
Support an arbitrary number of columns.
Support arbitrary formatting of the table cells (e.g., thickened column separators between column groups)
Assumptions:
The header has no more than 2 rows
A given cell in the header can use colspan or rowspan, but not both
Each logical column in the header table contains at least one cell that does not span multiple columns.
The cells in the body do not use colspan or rowspan
How I implemented it:
Separate the table into two tables: a table of header cells and a table of body cells
Wrap each table in a <div> and then both of those in one “ScrollTable” <div>
The div containing the body table is what facilitates the scrolling
The main <div> has display: inline-block to shrink to fit its contents
Use table-layout: fixed to allow for explicit column sizing
Use box-sizing: border-box; and -moz-box-sizing: border-box; on the table cells to make column-sizing easier
Implement an updateLayout method:
Clear any explicit column widths to allow natural column sizing to occur in both tables
Loop over a representative set of cells from the header table and body table – one cell per column.
For each column, assign the bigger column width from the header or body table in both tables.
For the header table, assign the widths to the <col> elements if the table has them. If the table doesn't have <col> elements, try to assign the widths to the cells in its first row.
For the body table, assign the widths to the cells in the table's first row
Snags that I ran into but overcame:
Retrieving the widths of the columns.
The ScrollTable needs to support multi-row headers. And the cells therein might use colspan or rowspan. So I can’t just grab an entire row of cells.
You can’t get a list of columns. You can get a list of <col> elements if the table’s markup includes them, but you can’t use them to access the columns’ widths.
You can access a column’s width from cells within the column, though, so I solved the problem by writing a function that loops over the cells in the header and retrieves a representative set of cells, where the cells might not all come from the same row.
For tables with table-layout: fixed, the table and column widths are set by the widths of <table> and <col> elements or by the width of the first row of cells. That’s it; cells in subsequent rows do not affect column widths.
This ultimately means that support for multi-row headers (which might use rowspan or colspan) can only be achieved by requiring the markup of ScrollTables that have multi-row headers to include a <col> element for every column in the header.
Snags I have yet to overcome:
When I assign a width to a <col> element, it doesn’t give quite the same width as when I assign that same width to a table cell. And box-sizing: border-box; and -moz-box-sizing: border-box; appear to have no effect on <col> elements.
Question:
How can I ensure that the width I assign to the <col> elements gives the same rendered width as what I assign to the table cells?
I'm using the jQuery Sortable UI to be able to move the rows in a table but I'm having the following problem:
If any of the table cells have data that are not equal in size (which results to an increase or decrease in the width of the cell), the table cells (the tds) shrink while moving a row to a new position. You can see a demonstration here.
Also, how do I make it so that only when I click in the first column (the empty column at the beginning of the table) of the corresponding row that I should be able to move that row?
Any help please!!!!!!!
Thanks in advance
http://jsfiddle.net/tUa3w/6/
$('.test1 > tbody').sortable({
helper: function(event, ui) {
var myHelper = [];
myHelper.push('<table style="width: 100%">');
myHelper.push($(ui).html());
myHelper.push('</table>');
return myHelper.join('');
},
items: '.item1'
})
What I think is happening is that your helper element had no table to fill out its' width. It's not perfect yet but maybe you can take it from here or someone else can chime in.
I have updated the code here: http://jsfiddle.net/tUa3w/4/
Setting the width of the table to 100% and the td's width to 20% is the simple way. You could set the width of the table to 600px, and each td to 120px.
Use the 'handle' option for the handle.
I have a table in a div with overflow-x: scroll. So, you can scroll the long table left and right. The first "column" (td's in first position of each tr) should contain labels for the rows. I would like that when you scroll right or left, the contents of the table scroll, but the labels stay fixed so you can always see them.
I initially wanted to create another table to the left of this one, but the catch is the contents of each row is variable, so I don't know the height of each row until after the contents load (making it difficult to set the height of each cell in the "label column." The reason I can't dynamically just update the heights of the label column cells after the content loads is that it is really slow on FF and IE. The slowdown comes from calling clientHeight on the content tr or first td. It takes 5-6 seconds on my first clientHeight call of the content (the rest of them take 0-1ms). Regardless, I don't know of another approach.
Any suggestions?
You could maybe put all the contents of your other cells into the first cell as well, at offset (0,0), so that the height of the label cell is automatically set to the height of the largest component. and then put a layer above them so that they are invisible, and put the label in there.
I've a jqGrid v3.7.2, after hiding a column using
.jqGrid('hideCol', infoName);
and setting the grid width using
.setGridWidth(setWidth, true)
The columns do not expand to fill the table width in IE8 only.
The table width is correct. The tbody/col widths comes short.
Any way to solve this problem via CSS? Or is there another method in jqGrid to correct this problem.
Found a solution from:
IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed
Simplified below for my purpose, added right after I hide the column:
// IE8 Fix, tbody not equal to table width for hidden col
$('#tblGrid_Subject, td[aria-describedby=tblGrid_Subject]').attr('colSpan', '2');