I'm trying to replace all my tables with divs in order to make their columns stackable in Twitter Bootstrap. This way people can still use Tinymce in the backend to easily create tables, but they won't break the responsive design. Zurb Responsive Tables just doesn't cut it.
The issue is that bootstrap divs are based on total width of 12 columns (span5, span7 etc) so the div classes would need to change whenever a table had more or fewer columns. I'm thinking I need a JS that can count the number of columns in the table and then replace those with divs of the proper classes while reordering the content. So for example, for a two column table the classes would be "span6". For a four column table they would be "span3." The Table tag being replaced with a div of class "row"
This is way beyond my JS knowledge, can anyone lend a hand or have a more elegant solution that still allows for easy backend editing in the wysiwyg?
Should be able to do this. Here is a sample code:
var table = $('table'),
div = $('<div />');
$('td', table).each(function(){
$('<div />').html($(this).html()).appendTo(div);
});
table.after(div).remove();
And demo: http://jsfiddle.net/tkirda/7GM5w/
Related
I need to scroll two tables with fixed columns at the same time Code at https://jsfiddle.net/jwhitley2002/fz2ynk4q/6/
I put a div around each table and used the js code,
$("#div1").scroll(function () {
$("#div2").scrollLeft($("#div1").scrollLeft());
});
And that works without the tablesorter function, but is incompatible with the tablesorter function.
Basically, I want ether scroller to move the non-fixed sections of both tables. Any ideas?
I made a Grafana's dashboard who is created by JavaScript and now I think I should add a border around each row to make reading easier.
That's the actual view:
but as you can see we can't see easily which row is for which "name".
So what I want to do is something like this:
There is no border option but you could use row titles and row height to separate the rows visually:
The option for row options can be found in the row menu on the left hand side. Here are the row options:
There you can choose the title size and you can set the height to create some space between rows.
I have two tables adjacent to each other both being populated dynamically in C#, I want both of these two tables to have the corresponding row height be exactly the same depending on what the first tables row height is (no specific height has been set, just needs to fit text in).
I have tried various ways of getting the height in C#, javascript, jquery, etc however they all return null or 0, i can get it to work by actively setting the height however this is not very effecient and occasionally buggy, is there a way I can get the height of a dynamically created html table row/cell?
#JoseRuiSantos comment is a better implementation if your design allows it (i.e. combine data in both tables in to a single table and accordingly render rows and columns to display as two different tables using css).
One way I could think is to try using javascript:
For this to work, do not set any table/row/column heights in both tables.
Add an empty column at the end of each table with a div element in it. In the page load completed event, identify the max column height in corresponding row of both tables and set the corresponding div element's (in both tables) height (in corresponding row) to the column max height.
I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.
Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});
Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/
Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of this is:
Google Squared
I tried to reverse engineer the code for the google squared table, but I have been unsuccessful so far.
Note: I need the ability to FREEZE the TOP ROW and the LEFT COLUMN at the same time.
There's a working example at http://ajaxian.com/archives/freeze-pane-functionality that should be easy to duplicate. Be sure to note the comments -- many of the users have made helpful suggestions for improving the script.
Per #Nirk's request, a direct link to the active demo is at http://www.disconova.com/open_source/files/freezepanes.htm.
Go with a basic structure like this-
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
Set a fixed table-layout and specify column widths in pixels explicitly. You should be able to achieve the same effect.
i have a version of this in use (for a Gantt-chart style display).
it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.
you need to work hard to get the cells to match sizes with the ones they match up to (
table layout-fixed can help achieve this).
The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.
You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...
As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.
hth
If you use jQuery there's a lot of plugins for tables with fixed head.
You need Scrollable (jQuery plugin)
Demo is here