I have two table cells, with dynamic content.
Table cell one works fine, when new content is added to it making it bigger than table cell 2, table cell 2's height fits table cell 1's and all is well in the universe.
But when new content is added to table cell 2 (which has overflow hidden, and works fine with display: block) it expands, the overflow never happens, and table cell 1's height now matches table cell 2.
What I want is when more content is added to table cell 2, it will show content up to table cell 1, then the rest is hidden. I understand I can do it in javascript, any idea how to do it without it?
Here's a JSFiddle: http://jsfiddle.net/dYsNx/
Col 2 should only go up to col1's height in content, rest should be overflow hidden
overflow: hidden should not be used in that way.
But, you get the concept.
Others, I saw your code is not very clean and keeping in standard.
So, I would modify it in my way (hope it is better)
Please see the following link:
http://jsfiddle.net/Edditoria/TGfzA/
As you see, overflow: hidden; is in #box, then set position: relative; without top/left setting.
To avoid display:table compatibility issue of IE<7, please just keep the default div display setting in CSS. I would use % rather than fixed px width to avoid IE's display issues too!
Assuming col1 is the base of dynamic height, there's nothing to do.
In col2 (and all other columns), you will need to add position: absolute; top: 0px; left: 50%;.
I change the col-x from ID to class, since you may need to add more columns later.
update: base on your comment, added scrolling instead of hide extra information.
It's impossible by means of pure CSS. This is from CSS 2.1 spec ( http://www.w3.org/TR/CSS2/tables.html#height-layout ):
In CSS 2.1, the height of a cell box is the minimum height required by the content.
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.
Related
When a certain user action is performed I need to add a row to a table which contains an <input> in each cell. I need the <input>s to automatically fill the available space without affecting the column width.
I need to start with this:
And end up with this:
But instead, when I insert the inputs every column stretches to a minimum of ~170px (depending on the browser):
Simplified demo: http://codepen.io/patik/pen/qZXMyL — Click the button at the bottom and note how the original column widths are not preserved once the inputs have been inserted.
I could read the column widths before inserting the inputs and then manually apply max-width to each input, however I want the column to remain fluid (that is, the columns should continue to adjust to fit the plain text data). Other rows may be added or removed to the table and I need the inputs to adjust accordingly.
As you'll see in the demo I've already tried creating a <td><div><input></div></td> structure in the hopes that the <div> would fill the column and the <input> would fill the <div>, but that doesn't seem to be the case.
I'd prefer a CSS solution (even if I need to apply inline styles when the inputs are inserted) but I'd be okay with a JavaScript solution if it's the only choice.
The <input>s must have a size attribute if you want to control their width with CSS:
<td><input size="1"></td>
The value of size doesn't matter (though it does need some value—you can't simply write <input size> and have it work). As long as the attribute is present the element seems to respect any CSS I apply to it. In this case, width: 100% does the trick.
Demo: http://codepen.io/patik/pen/JXrEGX
Try adding this to your CSS code:
input[type="text"] {
width: 100%;
box-sizing: border-box;
}
Meaning:
input[type="text"] Select only the input boxes of the type text.
width: 100% The width occupies 100% of the width available from the parent.
box-sizing: border-box Make the width also count the border.
http://codepen.io/anon/pen/xVLoYq
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.
I have a html table which I would like to control the sizes of the cell manually. I am getting confused about how its supposed to work.
First of all, there is a css attribute "table-layout" which is supposed to control whether or not the cell size is automatically set to the largest content in the column or to a fixed size. I tried setting the css width for the td elements using both table-layout=auto and =fixed, and both times the content shrinked from its original size. The problem is that it didn't shrink to the size I wanted to using either value for table-layout.
Here is my css code:
table {table-layout:fixed;}
tr, td {border-style:solid;
border-width:2px;}
.coursename{width:50px;}
.startdate {width:5px;}
.isbn{width:10px;}
.author {width:20px;}
.booktitle{width:10px;}
Second of all, what exactly are the rules for a automatic table layout? If the content of all the table cells together go past the size of the page, are there certain columns which will shrink first? Will they shrink at all?
One idea that might help is, if you have a link in each cell for example, set the link like this:
a { display: block; width: 30px; }
Do this for every cell in the table row and you will have table cells with fixed widths. Provided that you fixed the width of the table as well... :)
I am still unsure what your problem is, but you could try
{table-layout:inherit;}
This should get the size from the parent element.
Also, you could insert the css element into the html and have it override any other elements by preceding it with a !
{class="!width:300px;"}
Hope this helps.
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.