I have a table with expandable rows, so each row expands to show another table inside. Sometimes such tables have cell content with long strings; this causes the parent table width to get wider when one of such rows is opened. I would like the parent table to remain the same width and that the child table stick within its 100% div container (which is inside a td) with overflow: auto, so it can be horizontally scrollable.
I made a codesandbox to illustrate better this: https://codesandbox.io/s/tannerlinsleyreact-table-sub-components-94n7n?fontsize=14.
Note that the parent table is inside a div with overflow: auto, so if you make the window narrower, you will see a horizontal scroll for the parent table. I want this behaviour in the child tables as well, but you'll notice that when expanding a row (by clicking the hand emojis), the parent table gets as wide as the child table.
EDIT:
I saw I could just get the parent table's width with JS and fix the width of the container div inside the td. But I was wondering if this problem has a no-JS solution.
Also, I tried with table-layout: fixed, but as explained in my comment, it doesn't solved the issue.
Any thoughts?
All table width depends on its cell's (TD's) content.
1) The first way is to give this style table-layout: fixed; to the outer table.
2) The Second Way is, you need to get the outer table width with jquery and assign it to container div (which is inside a TD). And for responsive generates the outer table width on resize of the window and assign it to container div (which is inside a TD). Then the container (which is inside a TD) will be horizontally scrollable.
Related
I'm working on a page where I need a table which will horizontally-scroll inside of a parent div if the table becomes wider than its parent.
Unfortunately, the platform I'm building this on places my code within a parent table cell, which breaks this. It seems that even if I put my table inside of a div (and set overflow-x: scroll on that div), the parent table cell inserted by the platform will expand past the size of the page to contain the children.
I've made a fiddle of what this looks like here:
http://jsfiddle.net/d3e9esL5/
... and a fiddle of what I want this to look like here (sans outer table):
http://jsfiddle.net/4budchj6/
Clearly removing the outer table fixes this problem, but unfortunately due to the platform I'm working on I can't do that. It's also best if I can avoid applying styles to the outer table, as that markup isn't under my control.
Is there any way I can style this the way I want without changing the outer table's markup or style?
When you use overflow-x you have to specify max-width (or width) too.
If you write something like this:
.flex-table {
overflow-x: auto;
max-width: 250px;
}
You will have a table never bigger than 250px, with horizontal scrollbar showed only if needed.
I have a pricing table and a DIV called "base" which contains another DIV named "offer". My wish is to make that on hover one of the OFFER DIVs, that this DIV will become larger. But, I can only do that if DIV "base" gets larger first to make place to enlarge DIV "offer". Otherwise, my pricing table crashes.
change the height of base div set to auto
.base{
height:auto;
}
then using jquery.
set the height of offer div as much as you want.
#('.offer.).onhover(function(){
$(this).height(value); //set value
});
I have a div with fixed width.
Inside that, there is a table. (Table may contain any number of columns)
On hover of each it shows a popup div.
But the popups for the tds of last column hide, because of the fixed width of the table containing div.
How to fix this problem?
I have a requirement to show scroll bar for a table. I have added a div element around the table with style="height:200px;overFlow:auto;". This is working fine if there are more records in the table, but if there is only one record in the table, i am not able to see the scroll(this is fine) and height of the table is same as before with empty space at bottom(as height i had set to 200px). How can i make the table height to normal by removing the empty space in case of only one record and showing scroll in case of more records.
Instead of using a height of 200px on the div, try a max-height of 200px;
<div style="max-height:200px;overflow:auto;">
http://jsfiddle.net/d42CA/
I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.
All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.
I've tried using
overflow:hidden
for the <tr>, <td>, and doing the same while placing the content within a <div> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.
When using the div solution, have you tried setting a height for the div itself while giving it an overflow: hidden style?