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.
Related
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'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.
i have a <table> and many (34) <td>.
I want to display three variable cells e.g. "name", "hobby1", "hobby2" and then I need to display 31 cells (for each day).
The width of the <table> is limited to about 1000px.
In the day cells always a string of the length 3 shall be displayed or nothing.
My problem is that, the cells never have the same width even if set with css.
The first three columns may be fixed too.
How can I manage my table, that all day <td>s (1-31) have the same width - no matter if the content is nothing or XXX?
http://jsfiddle.net/sBYdu/
A couple of css additions can achieve this.
Use a fixed table-layout
Apply width to your table header not the table cell
Apply word wrapping to the table cells
http://jsfiddle.net/nnePW/
table {
table-layout: fixed;
}
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.
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.