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.
Related
I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.
I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.
I have pretty much exact table structure as in this example here;
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?
The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width.
https://codesandbox.io/s/optimistic-benz-ilnz2
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 ?
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/