Suppose I have a straight-forward flex-box table. I want the columns to all have equal width, to expand to the width of the table. That is, if there are four columns, each column will be 25% of the total table width. I know how to do this.
Now suppose that I want to be able to mark an arbitrary column with a class .fit-to-content. Any column marked with this class will have its width set to the max width needed for the content in the column.
This Codepen is my initial attempt at doing this: https://codepen.io/anon/pen/eoJmMN
Notice that while the flex-box column marked as .fit-to-content does have its width set to its content width, the widths differ across rows. Is there someway with flex-box to have the column share the same width?
Suppose I do not know the width in advance (i.e. I cannot just set the width to 100px or so).
Related
I want to make a responsive table, that has the same column width for unknown number of columns. I'll be appearing/removing columns with JQuery using "display: none;" property. Each column has minimum width, or takes as much space as available, dividing it equally with other columns. When there is not enough space for all the columns, I want my table to overflow with scroll. "table-layout: fixed;" doesn't work, because it divides the space without taking min-width into consideration. JQuery solution after page load is also acceptable. There are also some strings inside that are very long that need to be word-wrapped.
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 have an HTML table with two rows. These two rows currently wrap to fit the content. I want the top row to continue to change its height to fit the content of the row, but I want the second row (which would otherwise have a lesser height) to match the height of the top row. How would I do this?
Even better would be for the top or bottom row to match the height of whichever row has the greatest height. However, I don't know whether this is possible.
There is no way to do this using pure html/css. You would have to script it with javascript.
I use tables inside tables. I want that the child table fills the parent table cell. Is this possible?
Also, is it possible for a table column to fill the remaining space without shrinking the other columns (not like width='90%' which may force some other columns to get truncated)?
I guess these can help you: http://jsfiddle.net/B26zm/
When you give width:100% to a table, it will fill the width of its parent cell.
You need to define a width for the table, and width for all columns 'except' the one you need to be flexible. That way, the column with no width, will expand/shrink to match the width you define for the table.
I have a table with several rows.
My 1st row has the full width of the table table.
The 2nd row has 4 columns with different sizes for each of them.
The 3rd row's first column's width is greater than the total width (1st coloumn's width+2nd coloumn's width +25) of the 2nd row.
Which attribute should I use for this type of design? colonspan is not working in this case
In a table the cells have the width of the column and the height of the row.
Thus, the only way to have two cells above each-other with different widths is if you use colspan.
So you will have to juggle colspans. See: http://jsfiddle.net/CBWJf/
You can maybe set the widths using colgroups.
If you aren't going to have anything immediately adjacent to the shorter rows, you can make all the rows the same width (the width of the widest table row), and adjust the size of each row using colspan on the cells, and setting the cells beyond the end of the row to have no border (thus appearing not to exist). However, if you are going to have any content there, you will have to either use a different method than this or include that content in the "invisible" cells.