I have a data grid table (div based) that not in table format. I have done it in div based format with fixed width cell.
My problem
If I have add the column in the grid table, it will adjust like table format.
How can I do it?
Above table I need to add the column but it's all fixed width cell, if I add extra column the
table collapses.
This is possible without table.
Just see below the link.
http://jsfiddle.net/anglimass/BkwgY/2/
Related
I have used Antd Table to display some data. It has 2 columns and the second column can contain some long paragraphs. The issue is that Antd Table is not wrapping the text which is going outside the width of the table like in last row of the below image.
So can anyone help me in wrapping the text if it is greater than the table width.
I have a ~200 row x 16 cell table in a scrollable div. Each row has an id which is also the innerHTML if td[0]
The table is too big to show total so it's in a vertical scrollable div for data perusal.
I was wondering if it's possible to specify a row by id and have the div scroll to show that row if it's not in view?
The built in browser 'find' does exactly this but it's not really user integrated.
No jQuery please.
TIA
Have you heard about scrollIntoView()?
You could achieve what you want using that e.g.
var elementToShow = document.getElementById("YOUR_ROW_ID");
elementToShow.scrollIntoView();
So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
I am using ng-grid and would like to omit cells in some of the rows, creating table colspan effect.I tried with simply not defining those cells, however they end up empty in the grid, and the border is visible.Is it actually possible to create colspan effect with ng-grid? So that border is not visible for not defined cells ?