I am having trouble of freezing multiple columns or column-group and making the rest columns scrollable.
I tried the solution like
how do I create an HTML table with fixed/frozen left column and scrollable body?
but it only works for one column. If I try to freeze multiple columns, they overlapped each other.
I also do not want to use multiple tables which will be difficult for dynamic data binding.
Does anyone know a simple solution for this case only using CSS?
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table.
Check the tutorials here.
http://www.datatables.net/extensions/fixedcolumns/
http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html
Hope this solves your problem.
Related
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
I'm trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
It is nice in word processors to create short-term column layouts with documents by using tab key with the defined anchors across the top instead of using tables because you can run overlaps like this.
L R
column a row 1 column a row two
this is the first column! on the right
This allows for overlap, or naturally spanning columns without the need for so much structure. Great when you don't need borders.
Can this layout be done in HTML? I know a tabbed layout can be accomplished on a webpage, what I don't know is if you can set the column locations like you can in StarOffice/LibreOffice/OpenOffice Text or in Microsoft Word.
Using div tags with the float: left and float: right styles, you can achieve this type of structure.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I had a question with regards to fluid arrangement of tables. I have attached a screen-shot below to try and explain what I am trying to achieve.
Basically, I have a number of dynamically created tables. Their widths are fixed but their heights can vary. What I am trying to achieve is, the maximum utilization of space when the browser window is re-sized (in terms of organization of the tables).
I have tried the following:
1. Arrange the tables in descending order of the number of rows they have.
2. Using a style of 'float: left;' on the table (or a div surrounding the table).
However, as you can see below, there is a gap below on the first column that could have been utilized by table 4 (the last one below), but it hasn't because table 3 (column 2, row 2) is taking up some space which prevents table 4 from being placed above.
I hope I've described it in a manner that could be understood, if not please let me know how I could clarify any points so that you could help me out.
Basically trying to get a fluid design with the maximum space utilization. Any ideas on how I could achieve this?
Thanks in advance.
Example http://img717.imageshack.us/img717/5492/exampleqm.jpg
Can't be done without javascript (or a whole lot of assumptions and restrictions).
Try the Columnizer jQuery Plugin.
Try the jQuery Masonry plug-in.