How can I format a table row to inherit the height of the content? I wish to have something like
I have tried
table{
table-layout:fixed;
width:700px;
}
but that does not work
Tyipcally, a table will inherit the height of the content provided that the columns have a defined width using either percentage of the total table width or absolutel pixel "px" definitions. IN addition, be sure that the table rows do not have a specified height i.e. 'height: 30px'.
Code Solution:
table {
width: 700px;
}
table tr td {
width: 350px;
height: auto;
}
A row cannot inherit inherit from the cells, as an element cannot inherit from its descendants, only from ascendants. But the calculation of a table row height takes the cell height requirements into account automatically, by the table height algorithms.
This happens in the example presented, too. Using the style sheet given and the simplest possible table markup, the result is as requested, apart from vertical alignment. That alignment is a separate issue and easily handled with td { vertical-align: top }.
If your page does not behave that way, please provide an example that demonstrates the issue (HTML and CSS code).
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?
I've got a border around all the TDs, but because they only contain hidden elements, they collapse into a single line. Is there any way to have them take up the width of the table without setting height and width explicitly?
i.e. height: 200px; width: 200px;
I've also tried other promising sounding styles like empty-cells:show to no avail. Ideally, I'd like for the cells to automatically size to fill up the table's height / width.
You have some options, you can't define specific height for cells via CSS, but you can define min-width for the cells (without setting a width for the whole table). Let's say your table has .mytable class, the cells will appear if you add this code:
.mytable td {
min-width: 80px;
}
.mytable td::before {
content: "\00a0";
}
We're adding here a min width for the table cells, plus adding a pseudo element (specifically a non-breaking spacing) inside the cells, so we add "invisible content" to the cell. This will apply for all cells, if you want to be applied to specific cells, you'll need to do that trough a class.
Hope this helps
I'm implementing a virtual table for browsing a very large table. Is there a way to position the rows (of fixed height) anywhere inside a large table? The problem seems to be that the table properties automatically stretch the row height - ignoring the defined pixel height of the tr element.
table { height: 10000px }
table tr { height: 10px; }
(ps. Using divs in this case is not an option.)
You need to read the spec about the Table Model. The default display value of a <tr> tag is display: table-row which is going to force you to adhere to the Table Model.
Rows are displayed according to the table grid, so if you want to move them you have to do so within the scope of the table's grid.
To make them 20px, you would use rowspan="2" if they are 10px in height.
Currently, there's no way to use rowspan and colspan in CSS which is bad from a semantic separation point of view, although there are future plans.
I have table with width: 100% and an element in that table with width: 40em; max-width: 100%, but the element is still stretching the table when the browser window gets too small.
I want this element to be a fixed width but not be larger than the container if the container gets too small. If there's not enough room for the fixed width, max-width: 100% should make it smaller to fit the available space. This works outside of a table.
Note that the max-width is not on the table itself. It is actually on an <input> element, although the code I've linked includes a separate table with the same problem on a <span> element. It also includes an <input> field outside of the table which behaves correctly.
link to jsfiddle
You should use table-layout: fixed for the table element to get the max-width properties of <td>'s descendants to work.
From the MDN:
The table-layout CSS property defines the algorithm to be used to
layout the table cells, rows, and columns.
fixed value:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
table {
table-layout: fixed;
}
WORKING DEMO.
if you put it on the element, the element gets stretched to max-width: 100%.
If you want fixed width, use width: 40px (instead of %, percentages are used in liquid layouts)
When you specify the column-width property in CSS for a div with a bunch of text in it, the actual width seems to be automatically adjusted so that an exact number of columns fit the page. If a column-width of 400px, for instance, is specified and there's actually 1000px of space then instead of showing 2.5 columns of text (with the .5 column overflowing to the right to invite the user to pan), it instead shows an even 2 columns of text.
I found in the dev.windows.com that if you specify values for all of the width properties involved (width, column-width, column-gap, and column-rule-width) then you can achieve this, and that works, but it requires that you determine the width of your containing div and that seems silly since you want that to flow.
Here's my CSS that's not working as I'd like...
.csscolumns .columns {
columns: 400px;
overflow-x: scroll;
height: 600px;
padding: 20px;
}
Have you tried tweaking with 'overflow' in your CSS? Try the following for the selected elements:
overflow: hidden;
This will hide any 'overflowing' content of the selected elements, behind the parent elements.