I'm trying to create a flexible table layout in which there is one column that does not flex at all. It has just enough room to accommodate a button for an actions dropdown. The remaining rows should consume the following space entirely and truncate if need be.
https://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js
I'm running in a React app, but I'm working with native table elements. While my truncation certainly seems to work, at a certain width there appears to be a breakpoint at which it simply stops truncating and the table overflows the body instead. In theory this should never happen unless the width of the browser is less than the 48px allocated for the button, which of course is never. The other columns should continue to truncate instead of stopping at some random breakpoint. Furthermore, the remaining columns don't flex proportionally to their content. Any ideas on how to fix these two issues?
This is what happens when you combine table layout with block/flex layout. If you are going to commit display: flex on your table rows, you need to extend the non-table layout method to table and tbody as well.
Changing table and tbody to display: block will fix the problem in your CodeSandbox.
I would also change thead to block display as well, as a best practice and for consistency, even though you won't see any issues with it in your current example since the longest cell of each column is in the tbody instead of the thead. If one of the columns had a column header that was longer than any of the cells in the body below it, you would run into a similar issue if you don't also set thead to block display.
Related
I am working on a table that looks like this:
There are 2 issues here:
the column header IPV6 Address is taking small width than the body's column width. And Model and Type are not in place. How to fix this?
I want the scrollbar only when the table columns are not fitting the screen.
I see you're using white-space: nowrap. This might be the cause of your column width issues. Try removing this to see what it looks like multi-line, this will allow the table contents to at least attempt to use the available space properly without being forced over the space provided causing the effect with the "IPv6 Address" that you see.
Most of the time if I have fixed widths for columns (especially with nowrap) in any table I look to truncate the contents of the text within if I want everything to display on one line neatly and not wrap.
https://material.angularjs.org/1.1.2/api/directive/mdTruncate
I have a table with entire columns I'd like to hide from view.
The real-life scenario is mobile platforms. I desire a table's less useful information to be hidden so that it fits on a narrow screen.
I've played around with it but there doesn't seem to be a true way to get this to happen.
http://jsfiddle.net/3712Ledn/
Even if I apply the class to all cells of the same column and then apply hidden or collapse, they still take up space.
If I turn display: none;, then the columns do collapse, but auto width columns do not expand to take up the new space.
Is there any way to achieve this without using JS?
Maybe this helps if i understand you. The seconds column is hidden and the first column stretches over the full page.
http://jsfiddle.net/uow30orv/
<table id="real" width="100%">...
You will need a tag inside the cell you want to collapse, then use a table-layout: fixed; on your <table>, this way, you will be able to set a width: 0; to the column you want to hide.
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
I'm working on a web page where I have a dynamically generated table where certain columns should be of variable width (sizing to the text) and certain columns must always be a specific width. However, the table is inside of a containing div, and firefox is resizing the table such that it stays within the confines of the div. The trouble is, it resizes the columns that must remain a specific width.
Is there any way to force those columns to remain the same size, thus forcing the table to overflow from the div? The div has overflow: auto, which allows you to still see the table, and this is the effect that I am trying to achieve.
Thanks.
You might try styling it with overflow: visible; You could also try floating it, but that opens a whole other can of worms that you probably don't want.
I have several encounters with this problem, I couldn't find a best way to have what I want to display to be displayed/aligned to my needs. Especially so for width of the columns with dynamic text.
Instead of tackling it head-on, I use another approach. I tried to limit the number of characters (variable font-wdith still an issue, need to tweak around) to be displayed on a fixed width column. I'll then add tooltip (via title attribute or tooltip plugins) when mouseover those truncated text.
This is not a direct answer to your requirement, just offering another alternative.
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.