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?
Related
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 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'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.
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).
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)