When tables are rendered the table usually only takes up 100% of the screen (if it is big enough) and then the columns get as little space each as is possible. Typically the columns will get as much space as the longest non-breakable content requires. How can I make things so that each column will get as much space as its longest content, even if that means the table will have to take up more than 100% of the screen width? I want each column to be as long as its longest content, regardless of how much space the table will have to consume.
Try this:
td {
white-space: nowrap;
}
This makes it so the text in each table data cell will not wrap.
Proof it works: Here.
Related
I am working on a table that looks like this:
There are 2 issues here:
the column header IPV6 Address is taking small width than the body's column width. And Model and Type are not in place. How to fix this?
I want the scrollbar only when the table columns are not fitting the screen.
I see you're using white-space: nowrap. This might be the cause of your column width issues. Try removing this to see what it looks like multi-line, this will allow the table contents to at least attempt to use the available space properly without being forced over the space provided causing the effect with the "IPv6 Address" that you see.
Most of the time if I have fixed widths for columns (especially with nowrap) in any table I look to truncate the contents of the text within if I want everything to display on one line neatly and not wrap.
https://material.angularjs.org/1.1.2/api/directive/mdTruncate
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 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.