Can we adjust column width of a table by adjusting another table's column width?
Elaborately :
In my HTML I have thead part set inside another table tag and the rest of the part in another table tag so that column headers remain fixed while scrolling.
Now I want to adjust column widths by adjusting thead part i.e. column widths must be adjusted automatically when I adjust the thead in another table.
How can I achieve this functionality?
Related
Is this a way to set a percentage padding inside a table cell without hard coding a width of this cell?
I have a table with dynamically changing number of columns, each of which must have an equal width, so I set:
table
{
table-layout: fixed;
}
It works great, but I also want to set a percentage padding inside several cells. Unfortunately, because of uncertain number of columns, I can't set a particular width to these cells.
If I just set:
table tbody tr td.with_padding
{
padding: 20%;
}
it looks like a padding for sells is calculated depending on width of whole table rather than of particular cell.
How can I solve this with pure CSS, if possible?
The width of first column in the html file(see Book1.zip) is defined in col tag of colgroup, also it is defined in the first row in tr tag. But the width of first column expands a lot comparing the desired 145px. see srceenshot:
Why the column width expands so much? And how to fix the column width to the desired '145px'?
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 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.
Like the title says, I have a table with many rows and columns. The text within the cells will be populated dynamically. If a column has a set width and the amount of characters exceeds this width, I want the excess text to be hidden rather than the column made wider. How can i achieve this? i tried overflow:hidden in the <td> style without success.
you need to put div inside td - div can handle overflow: hidden
Or make table layout fixed using table style - this will cause table will not change columns width automatically