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.
Related
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.
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 some data (a list) that I need to display in a layout with rows and columns. On my desktop I have room for it to have 5 columns, but my mobile device only has enough width for one column. How can I display this data so that if there isn't room for another column, the next item just starts a new row.
I tried using "float: left;" and it's very close to what I want, but when there isn't any more room and it starts the next row, I need the columns to still line up.
update: The problem with float:left; is that the items don't line up into columns. Since the items are user-editable I don't have any way of knowing ahead of time how wide they might be.
update2: Removed references to table and instead described what a table looks like.
This shows an example of how the markup is and what I have attempted. It also has a manually built table that shows what I'm trying to get it to do.
http://jsfiddle.net/7rrcQ/
If you want them to line up in columns, then obviously for a column its elements must have always the same width. If you don't want to touch floated elements width, then you can wrap them in another div and then fix that div width.
Otherwise calculate dinamically with javascript floated element width and apply to them margins to line up with the column. But anyway you have to have in mind some column width, known a priory or calculated from first dynamically loaded element in that column.
If you want to adjust number of columns to the page width, then all column elements from all columns must have the same width if you want them to line up, because one element may be from a column or from another depending on the page width. If this width is in percentages, then there will be always same number of columns independently of the page width. In the other case (in pixel, em's), column elements will "jump" to the next row when page is gets more narrow.
I hope this is what you were looking for.. http://jsfiddle.net/7rrcQ/5/
<div class="newContainer">
<div class="tdElement">Lorem</div>
<div class="tdElement">ipsum</div>
<div class="tdElement">dolor</div>
<div class="tdElement">sit</div>
<div class="tdElement">amet,</div>
<div class="tdElement">consectetur</div>
<div class="tdElement">adipiscing</div>
<div class="tdElement">elit.</div>
</div>
Your Css
.container {
overflow: auto;
width: 100%;
}
.tdElement{
border:1px solid black;
float:left;
width:100px;
}
It is not possible to achieve the result without setting the items to a specific width (in some units). A table (whether in HTML or using display: table etc. in CSS) can get its column widths allocated by browsers according to the width requirements of the items, but then you need to have content divided in columns in a specific manner.
To make the amount of columns depend on the available total width, you would need scripting and guesswork.
If equal-width items are acceptable (and I don’t see why not) and if you can make a reasonable guess on the maximum width in em unit, you could use your current (div and span markup) and only the following style sheet:
.item {
border: solid 1px;
padding: 0 0.15em;
float: left;
width: 5.5em;
text-align: right;
}
The main problem is that adjacent borders won’t collapse. Sorry, I have no solution to that.
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.