Freeze first column of html table
you can use this codepen to test it out. CSS: JS: Solution 1: Simply set the for first column? Solution 2: There some problem when you fixed column min-width I have fixed that by using Question: I have a table which has a header row, but also a header column and a total column with several columns in between. after a few attempts i manage to freeze it but somehow when i scroll the table horizontally the columns at the left seems like overlapped with the first column.
I would like to freeze the first column of my html table. after a few attempts i manage to freeze it but somehow when i scroll the table horizontally the columns at the left seems like overlapped with the first column. i couldn’t find a way to fix it. can you please help? you can use this codepen to test it out.
table < width: 100%; position: relative; overflow: hidden; display: block; >thead < width: 100%; display: block; position: relative; overflow: visible; >thead th:nth-child(1) < position: relative; display: block; min-width:200px; >tbody < width: 100%; position: relative; display: block; max-height: 307px; overflow: scroll; >tbody tr td:nth-child(1) < position: relative; display: block; min-width:200px; >table th, table td
Simply set the background-color for first column?
table th:first-child, table td:first-child
There some problem when you fixed column min-width I have fixed that by using
Looking for a way to freeze table rows and columns in, After you add so many columns and rows, they either freeze or take forever to load. From what I can tell, the problem has to do with offsetHeight and offsetWidth but I don’t know enough to fix it (or if it’s even possible to fix). I have tried using dataTables as well as fixedheadertable.
How To Freeze HTML Table Columns and Rows with
Having a freeze panes effect on HTML Table . Fixed/Frozen the Columns and Rows of HTML Table without JavaScript and Jquery.Editor: Visual …
I have a table which has a header row, but also a header column and a total column with several columns in between.
Name Score 1 Score 2 . Total -------------------------------------- John 5 6 86 Will 3 7 82 Nick 7 1 74 The entire table is defined inside a fixed-width scrollable div because there are likely to be a large number of «Score» rows and I have a fixed-width page layout.
What I would like is for the first ( Name ) and last ( Total ) columns to remain visible while the inner columns scroll.
Can anyone help me with this?
Edit: I mean horizontal scrolling only — changed to specify that.
Update: I’ve solved this problem for myself and have posted the answer below. Let me know if you need any more information — this was a bit of a pain to do and I’d hate for someone else to have to rewrite everything.
Can I propose a somewhat unorthodox solution?
What would you think about placing the ‘total’ column after the ‘name’ column, rather than at the very end? Wouldn’t this avoid the requirement for only a portion of the table to scroll?
It’s not exactly what you’re asking for, but perhaps it is a sufficient solution, given that the alternative would be pretty messy. (Placing the ‘total’ and ‘name’ columns outside of the table, for instance, would create alignment problems when not all rows are of equal height. You could correct this with javascript but then you’d be entering a whole new world of pain).
Also from a UI perspective, it may be that ‘name’ and ‘total’ are the most important data, in which case it would make sense to put them together, followed by a sort of ‘breakdown’ of the total. Of course, we seem to have an intuition that a ‘total’ should come after its constituent parts, but I don’t think it would cause too much confusion to the user if the order were reversed like this (though this is a question for you, based on your product and your users).
Anyway, something to consider.
Here are some more unorthodox solutions, now that I think I understand your intentions a bit better:
- Paginate the scores. Give the most recent ten, say, and the total, and a link to older scores, which are provided 10 at a time
- Only give names, totals, and some other meaningful measures such as mean and sd, then provide a link for each name that shows all results corresponding to that name. You could then also provide a link showing all results for a given score set, so that comparisons between different users can be made. The point is that you’d only have to give 1 dimension of data for each view, rather than having an unwieldy 2D data set
- Make the rows sortable (easy with jQuery UI) so that if I want to compare Mary to Jane, I can drag and place one after the other, so I wont need to keep scrolling left and right to see which scores correspond to which names
- Highlight a row when it is clicked, by changing the background color or similar, again so I don’t need to keep scrolling left and right.
Anyway you get the idea. Perhaps it is better to look for a UI solution than a contorted markup solution. Ultimately I would be questioning how important it is to present so much data to the user at once, that a portion of it needs to scroll in a particular fashion for the data to be readable. Perhaps you’re building a spreadsheet app, and you really do need to display a 100×100 matrix in a single view. If not, you could surely come up with more creative ways than I have to split up the results.
Take a look at this jQuery plugin:
It’s not complete right now (I just mocked it up really quick), but here’s a way of doing it using straight HTML. You want three tables . two outside the and one inside the . All three are floated to the left, so that they’re all on the same line.
Name John Will
Score1 Score2 .5 6 .3 ****;/td> . ****;/td> 1 .
Total 86 82
Note: The padding-bottom on the div is so that the scrollbar does not cover up the table in IE. Also, the bug I have to work out is how to specify the width of the header elements inside the middle table. For some reason, specifying the width=»» attribute does not work. Thus, if the text of the header element is too wide (and breaks onto another line), then the layout is broken (off by one row)
I assume you want to scroll it horizontally only. Otherwise it could be confusing with static columns.
You could put the overflow: auto onto a containing element of the inner table cells only. I’m not sure how browsers would handle this, but you may be able to put the elements you want fixed inside thead and tfoot elements, and put the scrolling portion inside a tbody element, and set it’s overflow to auto.
Failing that, you may need to drop semantics and code the left column and right column outside the table.
Personally, I’d try code it as semantic as possible, and then use JavaScript to position the left and right columns. Without JavaScript, you should make it fail gracefully to just a wide table (not sure how difficult this would be, as you say you have a fixed width)
You could try this (rough) jQuery example to put the first column’s values outside.
var nameTable = ' Name ' + nameCol.html() + '
'; // finish table string $('#scoreTable').before(nameTable); // insert just before the score table Use CSS to position them to align correctly . This is untested, but it should give you some idea.
How to freeze a Header and Columns of a HTML table, And here is the code for Freeze: Here i am trying to fix only one first column ,but in future i want to fix multiple random columns . //For Header and Specific columns to be fixed . var lastPosY = 0; var lastPosX = 0; $(«#»+$(this).attr(‘id’)).scroll(function < var currPosX = this.scrollLeft; // get …
I have a large table of data with probably about 50 columns and a couple hundred rows. I have tried out many jquery plugins to freeze headers and columns but they don’t seem to work correctly. After you add so many columns and rows, they either freeze or take forever to load. From what I can tell, the problem has to do with offsetHeight and offsetWidth but I don’t know enough to fix it (or if it’s even possible to fix).
I have tried using dataTables as well as fixedheadertable. I know that the problem is when I add the jquery. If I don’t use jquery, the table loads instantly.
Does anyone have any recommendations or any ideas on how to do this without javascript? The data is a huge report so it all needs to be on 1 page. I need to be able to freeze 2 header rows and 2 columns. I also want the table to be able to expand to 100% width (and maybe 100% height).
I would break your table into two tables. Have the first table have nothing but your table headers, then put a second table underneath, with your table rows.
Then put that second table into a scrollable div, so that as your scroll your 100 rows, your headers will still be visible.
Something like this fiddle
How do I freeze the first and last columns of an html, The stripFirstColumn method creates a new table (Id=»nameTable»), traverses the original table and takes out the first column, and adds those cells to the nameTable. The stripLastColumn method does basically the same thing, except it takes out the last column and adds the cells to a new table called totalTable.
Table freeze column html
You need to fix the sticky location for each cell.
Assuming that your TD cells have the following CSS parameters:
padding-left: 5px; padding-right: 5px; border-left: none; border-right: 1px solid black;
The formula calculation of next sticky location of TD cell is as follow:
= cell width + padding left + padding right + border width left + border width right
= previous cell sticky location + cell width + 5px + 5px + 0 + 1px
= previous cell sticky location + cell width + 11px
The calculated sticky location for each cell will be as follow:
cell 1 = 0
cell 2 = (cell 1 + 11px) = 111px;
cell 3 = (cell 2 + 11px) = 222px;
cell 4 = (cell 3 + 11px) = 333px;
.div1 th:nth-child(1), .div1 td:nth-child(1) < position: sticky; left: 0; width: 100px; min-width: 100px; > .div1 th:nth-child(2), .div1 td:nth-child(2) < position: sticky; left: 111px; width: 100px; min-width: 100px; > .div1 th:nth-child(3), .div1 td:nth-child(3) < position: sticky; left: 222px; width: 100px; min-width: 100px; > .div1 th:nth-child(4), .div1 td:nth-child(4) < position: sticky; left: 333px; width: 100px; min-width: 100px; > .div1 td:nth-child(1), .div1 td:nth-child(2), .div1 td:nth-child(3), .div1 td:nth-child(4) < background: #ffebb5; > .div1 th:nth-child(1), .div1 th:nth-child(2), .div1 th:nth-child(3), .div1 th:nth-child(4) < z-index: 2; >
General News Suggestion Question Bug Answer Joke Praise Rant Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
Styling HTML tables: frozen rows and columns
Over the years, I’ve spent a lot of time thinking about this problem, while developing a UI widget framework. The most used widget in UI frameworks is the Grid component (also known as a Data Table, or just Table), and one of its most notorious features is the so-called «frozen» headers. These are headers which always stay in place when you scroll the content. Mind you, this was before position: sticky existed, and usually required some form of JavaScript-based synchronization of rows and headers 😱
So, today I noticed a question on Reddit that asked the same, and decided to give it a try:
As it turns out, position: sticky works wonders!
The gist of the approach is to set sticky positioning on header cells. They require also a background, so that scrolled contents don’t show through them:
div class="wrapper"> table> thead> tr> th>th> th>column 1th> th>column 2th> tr> thead> tbody> tr> th>row 1th> td>scrolltd> td>scrolltd> tr> tbody> table> div> .wrapper width: 320px; height: 200px; overflow: auto; position: relative; > table table-layout: fixed; > thead, tr>th position: sticky; background: #fff; > thead top: 0; z-index: 2; > tr>th left: 0; z-index: 1; > thead tr>th:first-child z-index: 3; > - Column widths are determined from cell contents. This means that each cell might require an additional element. That is a good idea, since it allows using text-overflow: ellipsis for cell values.
- Cell borders require some work to behave consistently, as sticky headers resize during scrolling. See full listing below.
.wrapper < border: 1px solid #ccc; background: #eee; width: 320px; height: 200px; overflow: auto; position: relative; >table < border-spacing: 0; white-space: nowrap; table-layout: fixed; >thead, tr>th < position: sticky; background: #eee; >thead < top: 0; z-index: 2; >tr>th < left: 0; z-index: 1; >thead tr>th:first-child < z-index: 3; >th, td < height: 50px; border: 1px solid #ccc; border-width: 0 0 1px 1px; text-align: left; padding: 10px; font-family: sans-serif; >td < background: #fff; >th:first-child < border-right-width: 1px; border-left: 0; >th+td, th:first-child+th < border-left: 0; >tbody tr:last-child>* < border-bottom: 0; >tr>*:last-child
column 2 column 3 column 4 column 5 row 1 scroll scroll
scroll 2 rowsscroll scroll scroll row 2 scroll scroll scroll wide wide wide wide scroll scroll row 3 scroll scroll scroll scroll scroll row 4 scroll scroll scroll scroll scroll row 5 scroll scroll scroll scroll scroll row 6 scroll scroll scroll scroll scroll