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?
Related
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.
I have a 3 column div layout and the 3 columns look fine. I'm listing items in each column however i'm having to set a min height for the blocks in each column and if the min height isn't big enough then on the next 'row' there is just a space.
However by setting a min height it means that there is a huge gap below the top row item if it's not as tall.
Is there anyway around this?
Site is here - https://steve-morris.co.uk/properties/rent
Each block has a gap below it and when the block isn't tall there is a bigger gap. I'm wondering how I set it so that instead of using a min height, the next row auto adjusts to the height of the tallest block in that row.
You could set .prop-list-title {min-height:290px}. It looks like the title is the only area where the text wraps. Because it's responsive you would want to make sure you set that rule in the proper media display in your css.
You can use some JS to determine the height of the largest box of the row and add a uniform height to all elements within the row.
Have a look at this: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
I am creating a table which I want to have a top part, middle part, and a bottom part. The middle is also divided into a left, center, and right. I want it so that the only thing that ever gets larger or smaller is the middle's center. I am encountering a few problems with this however:
The table isn't filling the entire height;
The Center-Left and Center-Right aren't holding their widths
I have created a JsFiddle so that you can see what I mean.
http://jsfiddle.net/CGv2Z/
Thanks!
Ignoring the fact that this is a table and you appear to be wanting to use it for layout (hint: You probably shouldn't be), and some other problems.
There were 2 primary problems.
You had every element under .Window set to display: block; and width: 100%. Remove that.
You have the width of .Window-Content-Content set to 100%, which is 100% of it's parent, which isn't what you want. You have left and right set to specific widths, table cells will then naturally fill in the extra width. if the parent table has a width set on it.
http://jsfiddle.net/CGv2Z/10/
take a look at this :
http://jsfiddle.net/CGv2Z/12/
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.
I have a table with 1 row and 5 columns. I have fixed the width of those 5 columns to certain known values (150px, 200px etc..). I have also set the left-margin for each one.
I want the table to widen and occupy the entire width of its parent. So, I set its width to 100%. When the table is wider than the combined width and margins of the 5 columns, it causes them to spread out across the table leaving gaps in between.
But, I want those 5 columns to stay on the left.
To achieve this, I added a 6th column and set its width to auto, hoping that it will properly push the first 5 to the left and occupy the remaining space. It works in Firefox and Chrome. But it doesn't work in IE. In IE, the 5 columns still space themselves evenly across the table.
I tried setting the width of the 6th column to 100% instead of auto. But the problem is, it is wiping out the left-margins of the 5 columns! Sort of like, the 100% column is pushing the 5 columns too much to the left that their margins have disappeared!
I want the padding, margin and width of the first 5 columns to be maintained, but pushed to the left, yet the table should expand as wide as its parent.
The table has a background image that needs to show up beyond the 5 columns.
Some might suggest that I move the background to the table's parent, but I can't - take my word for it :D
How can I get this to work in Firefox, Chrome and IE?
Thanks.
Here is the link : http://test.greedge.com/table/table.php. Try it in FF and IE
Edit: The solution is simple: Add a to the one td in the table in the last column.
The table cell of the inlying table is not rendered, because it contains nothing. Thus, the last cell also contains nothing, does not get rendered, and the other cells have to split the available space amongst them.
I don't know which browser is doing the right thing here, all IE's (including 8) don't render the column, all other browsers do.
Old answer:
Columns aren't supposed to have margins according to the CSS 2.1 spec:
margin-right, margin-left
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
You will need to use padding within the cells.
An auto column should work in any browser in the scenario you describe (just don't specify any width). Can you post an online example of a table that doesn't work?