I'm currently looking for a way to design a table structure with HTML and JS which should be
Horizontally Scrollable (It has to be possible to dynamically add new columns)
Tolerant to changing sizes (e.g. when adding some text or controls) of cells. E.g. when doubling the size of the second cell in the second row every other cells should stay in the correct columns.
It should be possible to adjust to rendered columns to the width of the screen.
It should be possible to use the same layout with swiping on mobile devices.
= IE8, FF, Chrome must be supported
Currently I'm thinking about a DIV based solution where the correct table structures of the columns and rows are preserved by resizing column and cell DIVs if needed.
That's how it should look:
Is the DIV based solution apropriate or is there a possibility of using the default HTML table?
Related
I have made this fully custom data table to display some content dynamically, you can manually change column size and order, doing so all cells are on absolute positioning with set width.
I want to create a function that will check for the "best size" for columns depending on the contents.
Like you would do in Excel for example when you double tap on a column separator (some columns will have long descriptions inside, some just links, etc.).
Cell will only contains texts, it can be wrapped (actually goes into ellipsis when resizing to small) and the rows allow for horizontal scrolling so there is no limitation on this side.
But so far I have no clue on how I can manage to do that, do you have any lead ?
Howdy,
Context:
I am attempting to recreate a section which has required some complex use of grid layouts. In an effort to conjoin the grids and get a mobile responsive layout using grid areas, I have attempted to set some of the grid layout sizing across these grids using dynamically adjusting "grid-template-rows" style assignments in my JavaScript file.
The basic construction is that the elements should appear in a row together and should have a uniform height set by their tallest pseudo sibling, despite being in separate grids by necessity for layout purposes.
I set the various grid item elements into a "row" array which is looped through to create a new array of their heights, which is again looped through to find the tallest height among them. I then do this for each row and take the heights given and set all grid-template-rows style for the multiple grid parents using those variables as fixed heights.
I am console logging the heights at several points to cross check them. The grid style changes have a media query screen size conditional statement wrapping them to account for variations in layout at mobile view.
I then created a ResizeObserver for the body element which should in theory dynamically adjust the heights as the window resizes.
Broken Features:
The heights logged by offset-height of my div element variables don't seem to match up with the value of the sum of my element content height plus it's padding.
On desktop it seems to be overvaluing, creating white space below as though the tallest element is actually slightly taller, while at mobile it is cutting short and bleeding over it's assigned grid height which itself is too small relative to the heights of their contents.
In the Dev tools adjusting the grid height of the mobile row doesn't seem to create more space for some reason, though I'm not sure where the constraint causing overflow is coming from if not the grid row height. I need to understand this part for this to be a viable solution.
My ResizeObserver is also not working as intended. Likely because I have not configured it correctly or because I have not appropriately repopulated the variable values with updated figures. I'm not familiar enough with it specifically to know what all is broken.
I'm in dire need of a consult.
Suggestions welcome
GitHub:
https://github.com/Aces-Gambit/grid-chart-project
I'm using CSS Grid to display a table of records. Each column is defined as "auto" because I'd like the column widths to fit the content.
In my app I have a button to fetch the next page of results, and I dynamically repopulate the grid from page 2 of the results. This has the effect of making the grid jump, because, of course, the content of each column on page 2 is not the same as it was on page 1. (I'm populating the table using Vue in a v-for loop.)
Is there any way to freeze the width of the columns after they are initially populated?
The only method I can think of is to use Javascript to get the widths of each column and then rewrite the CSS grid-template-columns value to specify columns as fixed-width. This is possible, but it feels like a kludge.
Maybe there's some CSS magic I don't know about? Something position: sticky, but for column widths?
My table columns for a table in Bootstrap are too small. I would like to be able to increase the width. If I put width as "auto" then it becomes too wide even on a desktop and I have to scroll horizontally. Weird thing is that the column width does not change whether its desktop or tablet. The table rows and header are generated using JavaScript and jQuery.
Each of my columns has in it an input textbox and one column is a select list.
First of all, make sure you have correctly wrapped your page in a .container or .container-fluid. After that, try to size the columns as you usually do with your grid in Bootsrap, as you can read in this answer.
You can make your table responsive wrapping it in a .table-responsive: when the viewport becomes too small, you'll have horizontal scrollbars.
I have a table which can have rows and columns added to and removed from it. I'd like to put a textarea to the side of it which will be kept to the same size as the table, so that it looks good.
I have to issues. First is getting it to show up on the right side of the table (provided there is space, if not it should wrap).
I have tried setting style to display: inline-table on the table and it does make the textarea (which is a sibling to the table in the DOM) show up to its right, but it does not line up in IE9, Opera, or Firefox. The textarea sticks up over the table. Works with Webkit. Webkit also has a nice grabber thingy on the bottom right to let me adjust the size.
If I use display: inline-block it now works in Firefox. Still broken in IE9 and Opera.
For dynamic resizing, I could just call a function to resize it every time the table changes.
How do I retrieve the size of a table or other element (in pixel units or other units)?
Fiddle demonstrating issue: http://jsfiddle.net/7jKDm/4/
var height = document.getElementById('tbl').clientHeight;
seems to do the trick. I believe it is in pixels.
As far as getting it to align with the table, you can have to last column of your table hold this textarea and rowspan the whole table, or you can set up column divs, which there are plenty of tutorials for with google search.
Seems like this person also got it to work using .offsetHeight