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.
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.
Demo
I'm trying to make a table that contains a horizontal scrollbar where the width of any individual row can be set to whatever I want. I've tried two different approaches to achieve this and they each give me problems:
If I assign a width to my table that is larger than its containing div and apply overflow-x: scroll, the table exceeds the width of its container. However, I have no control over the width of my cells. Setting td{width:'x'px;} doesn't do anything.
If instead I apply table-layout:fixed to the table, I can now adjust the width of individual rows but cannot exceed the width of the table container.
How do I get the best of both worlds? I need the table to exceed the width of the container in order to get the scrollbar, while also being able to set the width of different rows to any value.
HTML table and table cells work this way by design - cells will always be confined to within the width of the table. If you want to size them like you do to normal inline-block elements, you can either:
Use <div class="table"> and <div class="cell"> to markup and style tables.
OR
Change the display mode in CSS. {display: block} for tables, {display: inline-block} for cells. You'd probably also need to fiddle with the display modes of other elements like <tr>, <th>, <thead>, <tbody>...
A little note: just in case you are using tables as a means to layout your page content, please stop and strongly reconsider changing your approach. Tables are a nasty crutch for layout, and should really ONLY be used to display actual tabular data.
Set the position: absolute; for the element that you want to exceed it's container width. But also set position: relative; to its parent, so you can adjust the position.
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?
first table is having less number of rows where as another having more row. As both of them are adjacent to each other. without adding more empty rows in it and making use of nbsp. Is there any other tag or attribute which we can use.
Assuming that you want the rows on each table to be the same height, you could put both tables around a div element with a set height and float left. A border effect will make it seem like they're the same height.
Try seeing how it looks with the table height as 100%. If that doesn't render well, give the table a set height and each tr's height as the table height / number of rows.