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.
Related
I have a HTML table that displays data from a number of different products. Each row of product data is followed by a table spanning row that shows more details about the product. In my table I allow the user to show or hide these details as they wish. The problem I have is that when this data is shown the column widths resize even though the details row spans the whole table. I have narrowed the problem down to inline-block elements that are present in the details row. When these elements wrap, the column widths for some reason get affected.
In the picture below you can see the effect taken from this fiddle: https://jsfiddle.net/6qanb8dk/. The widths of the columns all change slightly due to the wrapping inline-block elements in the details part of the second table, which is otherwise identical to the first table. Here the effect is not huge but in my actual application the table moves around enough to be annoying to the user. I would like to know why this is happening and how it can be prevented.
I'm posting a screenshot of the element in question. You should be able to see, I am applying element-specific styling removing all margin, padding and setting the width to 0px. No matter what I do, this table data element is abnormally large. I want to significantly reduce its width, but it won't listen to me. I have the feeling this is some obscure HTML algorithm that I know nothing of but can't say. Any ideas?
Update: The answer was that HTML will make sure the table data elements take up the entire width of the table, no matter if you try to narrow individual elements (so in essence, it was some weird HTML algorithm or functionality). That said, I will accept the answer below because it is so thorough it should cover the other possible issues people may run into.
There is some obscurity to how the width of a table cell (<td>) is defined, as official documentation is unclear and allows some behavior to be defined by the browser. But here are a few characteristics that appear stable across the spectrum of browsers.
Managing the Width of HTML Table Cells <td>
Table with Single Cell
In a table that consists of a single cell – in other words, a table with one column and one row – where the width hasn't been explicitly defined in the <table> element, the width can be controlled directly by the <td> element.
This won't work (the td rule will be ignored):
table { width: 100%;}
td {width: 300px;}
The width: 300px fails because the <table> element has a defined width.
However, this will work:
/* table { width: 100%;} */
td {width: 300px;}
DEMO
Table Column with Multiple Cells
To set the width of a table cell in a column with multiple cells the entire column must be adjusted. Any widths assigned to the individual <td>s will be ignored. Simply adjust the width of the table to adjust the width of the <td>s in the column.
DEMO
Table with Multiple Columns and Multiple Rows
To set the width of a table with multiple columns and rows, the Table Column Element (<col>) is ideal because it targets individual columns.
DEMO
The problem described in the question involves a table cell that won't accept a shorter width assignment. The first realization here is that the table cell by default expands to fill 100% of the column width allotted (learn more about <td> default width). The way to reduce the width of this cell is described above.
HOWEVER, I suspect that in some cases the person wanting to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (like an image or a form input). In these cases, adjusting the table may be unnecessary. All that would be needed is to adjust the width of the content itself, or its container (div, span, figure, etc.).
In this image, the width of the table cells are at 100%, but the width of the input fields vary.
DEMO
colspan
If in fact the need is to reduce the width of a single cell within a column of multiple cells, then you may want to consider the colspan attribute. With colspan, columns can me merged making cells wider. Cells without colspan assigned will be shorter, and appear even shorter when their adjacent cells are hidden.
In this image, display: none has been applied to the bottom right cell of this 2-column table.
DEMO
So, in the case of your table cell that won't budge, consider adjusting the width of the <table> element (if it's a single column table), assign and adjust a <col> element (if it's a multi-column table), adjust the width of the content directly (if that's the only element you want adjusted), or use colspan.
Sorry I can't be more specific about the exact solution in your case. No code was provided for review. But hopefully one of these methods helps you out.
I have to add data to table cells dynamically. But when I add data to one cell, the height of all the other cells also increases. So, is there any way that the height of only that cell where data is added increases, rest remain same.
Also is there any way to insert only table cells beneath certain cells in a row without adding a new row?
embed the content in each cell within a DIV and enable overflow:auto on that div, so that a scroll bar appears if the height exceeds the maximum permitted.
<table><tr><td height="50"> Hello World!!</td></tr></table>
Put the height inside the td tag
Fundamental problem... tables are grids. You can merge cells (col/rowspan) but a line is always a line - which is to say you can't make a cell a different height to its neighbours by definition.
If you're trying to show data in a hierarchical way, use a hierarchical structure like <ul>/<li> and style it as appropriate (margins, etc...). If you need block elements, have each <li> wrap a <div>
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 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.