I'm laying out a table (yes, for tabular data!) and I'm failing to understand how the widths of the table cells are being determined. For a <table> with 100% width and two empty <td> cells, each cell will take up half the space. Things start changing once different elements are added within the <td>s. However, the children elements of the <td>s all have width of 100%. I would not expect this to change the width of the cells, but it does.
For example, the two cells in the following code have different widths:
<table>
<tbody>
<tr>
<td>
<div>100%</div>
</td>
<td>
<input placeholder="other" type="text" />
</td>
</tr>
</tbody>
</table>
I collected a few other examples in this jsfiddle.
My question(s):
Why is this happening (e.g. why aren't the columns even?)?
Can I maintain evenly sized cells regardless of their contents, even if I don't know how many columns there will be for a given table?
You are letting the browser determine the widths and it will collapse the smaller one to minimum size for the containing elements. If you want to have everything being equal set table-layout: fixed on your table css.
This will divide the columns close to evenly for you.
http://jsfiddle.net/Jqqd9/6/
http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout
In the fixed table layout algorithm, the width of each column is
determined as follows:
A column element with a value other than 'auto' for the 'width' property sets the width for that column.
Otherwise, a cell in the first row with a value other than 'auto'
for the 'width' property determines the width for that column. If
the cell spans more than one column, the width is divided over the
columns.
Any remaining columns equally divide the remaining horizontal table
space (minus borders or cell spacing).
The default is auto which is found in this manner.
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the
formatted content may span any number of lines but may not overflow
the cell box. If the specified 'width' (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
Also, calculate the "maximum" cell width of each cell: formatting
the content without breaking lines other than where explicit line
breaks occur.
For each column, determine a maximum and minimum column width from
the cells that span only that column. The minimum is that required
by the cell with the largest minimum cell width (or the column
'width', whichever is larger). The maximum is that required by the
cell with the largest maximum cell width (or the column 'width',
whichever is larger).
For each cell that spans more than one column, increase the minimum
widths of the columns it spans so that together, they are at least
as wide as the cell. Do the same for the maximum widths. If
possible, widen all spanned columns by approximately the same
amount.
For each column group element with a 'width' other than 'auto',
increase the minimum widths of the columns it spans, so that
together they are at least as wide as the column group's 'width'.
You can simple use the table-layout:fixed CSS property to solve the issue,
here is the solution.
http://jsfiddle.net/hbirjand/HWhp6/
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'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 this table:
<table>
<tr>
<td>
<div style="height: 100%">Some Content</div>
</td>
<td>
Some Content<br><br><br><br>
</td>
</tr>
</table>
<div> height should be 100% inside <td>, but height of <td> is not specified.
There should be some simple solution.
JS FIDDLE EXAMPLE
You can use:
<td style="vertical-align:top;">Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:bottom;">Bottom</td>
<td style="vertical-align:54%;">Custom</td>
// More information on: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
On the table cell to position the content correctly. You still however get background coloring issues where you probably want to apply any color directly to the table cell like so:
<td style="background-color:yellow;"></td>
Information on table row heights:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells. A 'height'
value of 'auto' for a 'table-row' means the row height used for layout
is MIN. MIN depends on cell box heights and cell box alignment (much
like the calculation of a line box height). CSS 2.1 does not define
how the height of table cells and table rows is calculated when their
height is specified using percentage values. CSS 2.1 does not define
the meaning of 'height' on row groups. Source W3.org
I have done inline css remember to always separate css using style sheets.
It seems that the div height is restricted to the cell's height, we can manipulate the cell height in pixels. 100% will only ever give you 100% of a cells min-height so you'll have to define it in pixels or some of form of dimension up to you.
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.