See here: http://jsfiddle.net/KDfTN/
I have a table for which one column will sometimes contain extra-long content. Normally I want the table to stay at its natural width (i.e. not filling its container). However, if the natural width would be larger than the container, I want to cut off the extra-long content with an ellipsis. As shown in the link, I've tried what I think is the correct way of doing this, but it doesn't work: The table just keeps growing past the width of its container. Any ideas or suggestions?
Edit: The width of the table's container is not fixed, just as it is in the JSFiddle interface.
Set max-width:300px; on td.long (or whatever width you want)
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 am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
I am creating a table which I want to have a top part, middle part, and a bottom part. The middle is also divided into a left, center, and right. I want it so that the only thing that ever gets larger or smaller is the middle's center. I am encountering a few problems with this however:
The table isn't filling the entire height;
The Center-Left and Center-Right aren't holding their widths
I have created a JsFiddle so that you can see what I mean.
http://jsfiddle.net/CGv2Z/
Thanks!
Ignoring the fact that this is a table and you appear to be wanting to use it for layout (hint: You probably shouldn't be), and some other problems.
There were 2 primary problems.
You had every element under .Window set to display: block; and width: 100%. Remove that.
You have the width of .Window-Content-Content set to 100%, which is 100% of it's parent, which isn't what you want. You have left and right set to specific widths, table cells will then naturally fill in the extra width. if the parent table has a width set on it.
http://jsfiddle.net/CGv2Z/10/
take a look at this :
http://jsfiddle.net/CGv2Z/12/
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.
My code for creating the data table looks like this:
myDataTable = new YAHOO.widget.ScrollingDataTable(
"containerDiv",
myColumnDefs,
myDataSource,
{height:"100px",width:"100%"}
);
That code produces a table that looks something like this:
(Screen shot not available anymore from external site)
http://drop.io/download/public/gfipf7axm6ydjsvuaiaf/296829ffb3ad115ecf1d9e13a607eaf2e2dc2788/Asset/37984293/v3/large_thumbnail
Notice how it creates an outer box stretching 100% just like I want it to, but the table itself does not stretch all the way 100%, instead it is only large enough to fit the contents of the table.
Please note that the outer box that stretches 100% is created by YUI when you run the above code, I didn't create that myself.
What I really need is just vertical scrolling and no horizontal scrolling. But YUI does not let you specify one or the other, you get both.
Is there a way to make the table stretch 100%? I didn't find anything about this issue in the YUI documentation, unless I have overlooked it.
Thanks for reading!
When you use a ScrollingDataTable and specify a width, the columns are not auto-sized. This makes sense when you think about it - the table must handle cases where there are too many columns to fit in the view, so it doesn't attempt to fit them.
Since it looks like you don't need horizontal scrolling, remove the width config attribute. To get the table to your desired width, you can try:
Specifying the width in css on the container div, rather than in the table config
Specifying column widths so they add up to the total width that you want.