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.
Related
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).
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've found a very strange behavior of a HTML table, where the width allocation of the cells depends on the count of rows. If I have 2 rows the cells have all the same width but when I insert another row the first column expands a little and the second column is narrower than the others.
I have uploaded an example on fiddle.
You can see this behavior when you delete the comment around the third row in the HTML.
Where does this behavior come from?
Table cells will expand to the content unless they have a fixed width. In your example you have table inside tables. Tables tend to have default values such as padding and cell spacing.
To get around this you can use a reset style sheet and modify the CSS of the table and its cells to your choosing
You may need to also perform CSS declarations such as collapsing borders if you really want it to be pixel perfect.
actually columns expands and oontract on the base of contents inside the header or cells
DEMO:http://jsfiddle.net/aPPAL/1/
see the results.
How does different browser use the Width attribute of Cells in a table?
I am using Tables extensively in my application and mostly use Fixed layout, with all columns given a specified width.
What I am interested to know is, do we need to specify width for cell in each rows? or is it enough if we do that in the table header and not specify anything in the table body?
Specifying the width attribute once per column should be sufficient in most cases. It doesn't even need to be specified in the first row, as long as it's specified in a subsequent row.
Here's a simple jsFiddle example.
If you use fixed table layout in the technical sense, i.e. have the CSS declaration table-layout: fixed, then the first row determines the column widths and any width settings for cells in other rows will be ignored. (This may result in truncation of cell contexts—that’s part of the idea of fixed layout.)
Otherwise, the width requirements of all cells are taken into account by the browser when it calculates column widths. So if you have width=100 in a cell in the header row but another cell in the same content has content that requires 200 pixels at the minimum, that width will be used and your setting for the first-row cell will be ignored.
I have a table with 4 columns. The first 3 columns should only take up the space they need to display the data / ui control that is placed in them, whereas the fourth column should take up the remaining space. I don't know while creating the table what widths the first three columns should be, so I can't put a "width" value in there.
If I set the fourth column to 100% width, then it squishes the first three columns too much; if there is a drop down list ("select" in html terms) in one of those columns, the last column would then force it to become somewhere around 20 pixels wide, whereas it should be as wide as the option element which has the longest text in that menu.
Other rows in the table will cells that span multiple columns, so I think I'm stuck using the table element (as opposed to divs etc)
Any ideas? IE6 is not supported by the site so whatever works in Firefox / Chrome should be good.
Try putting width:1%; white-space:nowrap; in the first three columns and leave the fourth without width