I have a table with several groups of columns. The table is larger than my page, so I have a control to show/hide some of these groups to fit on the page. The initial table looks good: all columns are about the same width within a group. But when I hide a group, the columns are not the same width anymore, and it looks bad.
Example: http://www.reviews-web-hosting.com/companies/apollohosting.html (broken link)
So far, the table looks fine. Click on >>. The first column under "Ecommerce Pro" is much wider than the other columns under "Ecommerce Pro", it looks odd. Click on <<, this time the first column under "Value" is too wide. At least on Firefox.
I've tried to use
<colgroup><col /><col span="5" />...
but no luck. If I set a col to style="display: none", the set of columns is still displayed.
Any HTML/CSS tip to keep the columns with the same width withing a group?
Edit:
to hide a column, I have to use visibility: collapse
it seems to be resizing well now, I do not know why
If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your <thead> to <caption> and remove the <td> inside of it, and then set fixed widths for the cells in <tbody>.
give this style to td: width: 1%;
In your case, since you are only showing 3 columns:
Name Value Business
or
Name Business Ecommerce Pro
why not set all 3 to have a width of 33.3%. since only 3 are ever shown at once, the browser should render them all a similar width.
well, why don't you (get rid of sidebar and) squeeze the table so it is without show/hide effect? It looks odd to me now. The table is too robust.
Otherwise I think scunliffe's suggestion should do it. Or if you wish, you can just set the exact width of table and set either percentage or pixel width for table cells.
Related
I have a table with entire columns I'd like to hide from view.
The real-life scenario is mobile platforms. I desire a table's less useful information to be hidden so that it fits on a narrow screen.
I've played around with it but there doesn't seem to be a true way to get this to happen.
http://jsfiddle.net/3712Ledn/
Even if I apply the class to all cells of the same column and then apply hidden or collapse, they still take up space.
If I turn display: none;, then the columns do collapse, but auto width columns do not expand to take up the new space.
Is there any way to achieve this without using JS?
Maybe this helps if i understand you. The seconds column is hidden and the first column stretches over the full page.
http://jsfiddle.net/uow30orv/
<table id="real" width="100%">...
You will need a tag inside the cell you want to collapse, then use a table-layout: fixed; on your <table>, this way, you will be able to set a width: 0; to the column you want to hide.
I am working on cleaning up my companies newsletter emails. My issue is that I would like to force my <td> to respect the width that I specify rather than following the widths of the previous <td>. The other issue is that this needs to be very email client compatible.
Here's a jsfiddle of what I'm working on. http://jsfiddle.net/zwf0dL8r/ Sorry about the inline styles, aren't html emails great..
As you can see, the light grey areas are following the width of the first <td> which is holding the cpap.com logo.
Ideally, I wanted to be able to define the widths of <td>s to something new, each time I create a new <tbody>..
You could use CSS to force some behavior, but the browser or email client generally calculate the width of columns automatically based on content, using the widest specified width for the column when the content is shorter. To avoid this you can add the property table-layout: fixed; to the style of the table, but you will have to manually assign the correct widths for each column.
Tables with fixed layout are faster to display but don't resize according to content. The larger content overflows it's cell, causing an ugly looking overlapping data.
Take a look here for e-mail client compatibility: https://www.campaignmonitor.com/css/
Edit.:
To make the bellow cell take the space of the above cells you can add a colspan="numOfColsToTake".
What many people forget is that each <TD> define a column, not only an individual cell. Imagine you are designing it on Excel. If you would do this on Excel, you would have to use the merge cells option for the bellow cell to take the space of the 2 above. The colspan attribute of <TD> elements makes exactly this.
<td colspan="2"><p>Something</p></td>
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.
I have been trying to lay out a table with the following:
two or three columns that automatically size to fit the content in them
anywhere from 1 to 4 columns that resize according to the width of the table, and which truncate the text inside them
one column that contains three buttons and which I want to be exactly 220 pixels wide
I got it pretty much working thanks to the answers on this question. I set "min-width" on the first two or three columns, and "width" on the last column, and in the middle columns I wrap the text in a div, and then set "max-width" on the td and on the div I set width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;. All that works fine on Chrome and Firefox and Safari and even IE 10.
The problem happens on IE7, 8, and 9. On all three "browsers", the middle divs don't truncate, they instead push out the width of columns to fit all the text, which blows out the table wider than the page.
I tried putting a table-layout: fixed; on the table on IE, but instead of getting what I expected or indeed anything sane at all, instead what I get is that all the columns are given the same width, ignoring the "width: 220px" on the last column's tds, and then after everything is laid out the last column expands to 220px, and blows out the table. If you don't understand what I'm saying, have a look at
http://jsfiddle.net/ptomblin/rHJk9/
in IE debugger or "Inspect Element" in Chrome or Firefox. If you look at the "Layout" of a td of last column, and it shows a small width same as all the other columns, even though the contents are 220px wide.
On the live site, putting the "ie8" class on the body is done using conditional <IF IE8> code, but jsfiddle doesn't seem to like that.
What I'm looking for is either a way to make the table work the same way on IE7-9 as it does on real browsers (without table-layout:fixed) or some "good enough" work-around that would at least fit on the screen, with or without table-layout:fixed.
http://imgur.com/44DeZv5 has a screen shot showing it on IE9. I've added a red line to show the actual edge of the table. Note how the button bar, which is in a td in that table, extends beyond not just the table, but beyond the actual screen width. (The browser is set to 1024x768, the table is inside a .content div that's 940 pixels wide)
http://imgur.com/0Zielaf is what it looks like in IE9 when you don't have the "table-layout: fixed"
http://imgur.com/K8Ob6VR is what it looks like on Chrome without the "table-layout: fixed". Note how it all fits on the screen and in the table. That's what I'm aiming for.
I found out what the problem was that caused table-layout: fixed to allocate all the columns exactly the same width, no matter what the width parameter on the actual column values: It was happening because the first row on the table had a single column with colspan="7". I figured it out because on W3Schools in the description of table-layout: fixed they mentioned:
The browser can begin to display the table once the first row has been received
which made me realize that it was probably only looking at the first row. I stuck in a dummy first row with empty columns, but with the appropriate classes on each one to give them appropriate widths, and it laid them out much better. (I also set the font size, height, and line-height, top and bottom margins and padding to 0 for this dummy row so it isn't distracting)
i have a <table> and many (34) <td>.
I want to display three variable cells e.g. "name", "hobby1", "hobby2" and then I need to display 31 cells (for each day).
The width of the <table> is limited to about 1000px.
In the day cells always a string of the length 3 shall be displayed or nothing.
My problem is that, the cells never have the same width even if set with css.
The first three columns may be fixed too.
How can I manage my table, that all day <td>s (1-31) have the same width - no matter if the content is nothing or XXX?
http://jsfiddle.net/sBYdu/
A couple of css additions can achieve this.
Use a fixed table-layout
Apply width to your table header not the table cell
Apply word wrapping to the table cells
http://jsfiddle.net/nnePW/
table {
table-layout: fixed;
}