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.
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 an HTML table with 2 columns. I want to show them both full, the second with right align. Now I make that with width: 100%; for the first column. But now the second column is always wrapped by words.
I want the second column to be on the right, but wrapped only if there is not enough space to show both columns full.
If you are really thinking about mobile or smaller screens on this case you should consider using a media query. In this case, when the screen falls below a certain width, you can specify a wider width for the right column.
http://www.css3.info/preview/media-queries/
Add the following CSS styling to the cell on the right:
td {white-space: nowrap;}
This will prevent the text inside the cell from wrapping, as in your example.
Is there a way to prioritize one table column in HTML? The thing is, I've got 4 columns, and the content may change a lot for the content in all cells. But I want the first column to take up as much space as possible, so the 3 other columns only use as much width as they need to keep everything on one line.
The table itself has a fixed width.
Assign a class to the three last cells in each row like this: <td class="tight">. Now, add CSS like this to your stylesheet:
td.tight
{
width: 1px;
white-space: nowrap;
}
The width rule instructs your cell to be as narrow as possible, and the white-space rule dictactes that the contents of the cell should never wrap across several lines.
This solution assumes, that the table is styled to have some fixed width (possible 100%).
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.
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.