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.
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 posted an earlier question about making having columns wrap in a way that utilizes the most space in the viewport, right here. Combining some of the answers, I came up with the following jfiddle. I will be having a variable number of columns (2-5) and a variable number of words in each column. If you resize the jfiddle window horizontally, you'll notice that the middle column uses a third of the viewport even though there are barely any words in there, essentially leaving empty white space. I wouldn't mind using jquery/js, but I'd like to have the columns more smartly resized.
The current CSS I have is
body {
padding: 1em;
display: table;
width: 100%;
}
div {
display: table-cell;
-moz-column-width:7em;
-webkit-column-width:7em;
column-width:7em;
}
span {
display: block;
width: 5em;
}
The body is the container, and the divs represent the columns, and the spans are the words in each column. The only thing I want to avoid at all costs is having the columns go underneath each other.
Your columns act the way they do because they are equal in size. You have a single style for div so all columns get the same styling rules applied and (in your fiddle) equally share the width getting 1/3 of the horizontal space each.
Only having 7 entries in Column B means that it doesn't reach the bottom so does not wrap into inside the div like the other columns with more contents, so cannot use the additional space.
It not really a case of "even though there are barely any words in there" its because "there are barely any words in there" - there is not enough content to wrap into the space based on the height of the table cells.
The height of the cell is determined by the contents of all three columns and how they wrap. So whichever column has the most words will wrap its contents until is takes up a amount of space vertically on the page. This is then the height for the entire table and all three columns. If either of the other two columns don't have enough content to wrap they will leave space.
If you double the number of words in columns A for example you can easily get a situation where there is "left space" in both column B and column C.
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)
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.