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/
Related
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.
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 need to combine two rows in a table into a single row so that I can apply a style (background with a gradient) on that row.
I tried to use rowspan on a table cell with colspan = number of total columns but that does not work.
Tried to use a nested table inside the main table header, but in that case the table background does not have the desired style.
Demo: http://jsfiddle.net/Debarupa/EyxkJ/3/
If you look at the demo, I need to have "Additional Info" and the column headers merged to a single row so that the style 'gridheader' can be applied to them as one row.
Ideas anyone? Thanks for any assistance in advance.
Try using two different classes for top two rows you want to combine. Then break gradient onto two, for each of these rows with color changing 0-50% for the first one and 50-100% for the second one.
Here is the example:
http://jsfiddle.net/EyxkJ/5/
Not sure if this is the most elegant solution though.
I have created a sample with nested table into table cell for the header.
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 need some help with aligning two tables together, i.e: having the columns line up.
The first table has the headers, and the second table has the rows displayed. I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise(puts the data away from the parent table..) Is there a way, that I can have the two tables align, so the data for every row lines up with each header column.
Thank you
The easiest way would be to have fixed widths for the cells and make the widths be the same for both tables. Also make sure that you have the table properites be the same (i.e. the cellpadding, cellspacing and table widths )
can't you just remove the closing tag for the header and remove the opening tag for the content?
It’s not a great idea, HTML-wise. Heading cells and data cells should really be in the same table. Then you get the alignment for free.
“ I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise”
Are you entirely sure there’s no way for Ruby to update an HTML table that has header cells? Really?