My table is fixed at 100%
table-layout:fixed
width:100%
You should remove the table-layout:fixed.
Fixed is specifically for ignoring the contents..
look at https://developer.mozilla.org/en/CSS/table-layout
As answered already you would still have to remove table-layout:fixed;
but, as I think you are saying, this means the table column widths will likely be calculated by the first row "heading" widths, which is not always optimal what you might have to do, depending on how many columns is to use the the col & colgroup elements - reference - to set percentage widths for each column, that way your preferences will be used over the browsers "first pass".. make sure they total 100% and your table should be OK
a code example from you would help see if this is an option, or indeed if there's a better one!
Related
I am playing with the table-layout:fixed, it works almost perfectly for my needs. However, apparently I can not have a column of fixed size that won't change when I add or remove columns dynamically from the table.
Here is the example. If you add some columns you can see that the first column shrinks and the checkboxes kind of pop out of the columns. How can I make the first column have a fixed size while keeping the table-layout:fixed behavior on the other columns?
I am using table-layout:fixed because once I add enough columns, it will add a horizontal scroll bar and will guarantee that the columns have at least the width I specified.
You can try a different approach by not using table-layout: fixed and achieve almost the same result. Also, instead of using width property for the <th>, you can define min-width.
Check this updated fiddle: http://jsfiddle.net/L9rudjng/5/. I moved the inline CSS into CSS box too.
The table will maintain the 500px until it can't hold enough <th>'s with 100px width. Then it will expand and force the horizontal scroll.
I have a pretty nested structure of tables from a CMS. Each column has a specified width e.g. width="61" for the first column.
Nevertheless Chrome ignores the width and adds random spacing so none of the columns have the right width in the end and it looks like this:
Other browsers display the code just fine.
I have tried to use table-layout: fixed but that made everything worse.
Here's the fiddle
http://jsfiddle.net/xv8U5/
Help greatly appreciated.
I believe there is a difference of rules depending on the browser. Most browser will scale the TD to the largest TD of the same column. Chrome, however, seems to use the first TD's width as column width.
Hence, if you specify the width of a TD after the first row, that width will be ignored if the first row already contained a TD for that column.
The solution is to specify the width right from the first row.
For some reason I am unable to set and width properties of TD elements within this table, which are NOT on the first row.
For example, in the linked example you can see I have tried to set the width of "Status" by using both the width attribute (set to 280) as well as inline CSS. Neither of these seem to work.
Example: http://www.dnsdebug.com/table.php
How do i manually set the widths of the second, or third row columns?
If you observe carefully, your table is filling 100% of the browser view-port, so, unless you allow scroll bars to appear, your table can grow any more... You may set "status" to 1000px that browser's will still render it as it shows on your link!
To confirm this, just tested setting the width to a lesser value and worked just fine... the problem is really the amount of data inside your table that doesn't allow your "status" to grow as you wish!
Ok I think I solved it. Zuul was right about the 100% width, so I just set the table width, and all was well! Thanks!
Given a HTML table with some data that may be either narrower or wider than the browser window,
In the former case I know how to make it expand to fill the full width.
In the latter case, how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
If by "truncating some columns" you mean truncating their contents, you can always make all TDs overflow: hidden, with a fixed height.
If, on the other hand, you want to get rid of columns altogether, then you´ll need a JavaScript solution that detects which columns fall outside the view and sweep them out.
Well, your question is difficult to answer. The easiest way I think for doing that is using Yahoo User Interface Library, it has a component (among many others) called DataTable in which you can programmatically add or remove columns. Here's an example that may help you.
PS: Check the other components, YUI uses just javascript and some of them are really cool.
to expand the table to the full browser widht just do this:
<table width="100%">
...how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
I suggest setting the table width to n% and also set width for the td's in percentages which when summed together will give the width of the table.
That however will cause the words to wrap within the td's.
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.