Given a HTML table with some data that may be either narrower or wider than the browser window,
In the former case I know how to make it expand to fill the full width.
In the latter case, how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
If by "truncating some columns" you mean truncating their contents, you can always make all TDs overflow: hidden, with a fixed height.
If, on the other hand, you want to get rid of columns altogether, then you´ll need a JavaScript solution that detects which columns fall outside the view and sweep them out.
Well, your question is difficult to answer. The easiest way I think for doing that is using Yahoo User Interface Library, it has a component (among many others) called DataTable in which you can programmatically add or remove columns. Here's an example that may help you.
PS: Check the other components, YUI uses just javascript and some of them are really cool.
to expand the table to the full browser widht just do this:
<table width="100%">
...how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
I suggest setting the table width to n% and also set width for the td's in percentages which when summed together will give the width of the table.
That however will cause the words to wrap within the td's.
Related
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}
So I'm having a problem and I can't think of a fix for it.
Im dealing with a situation where users can post comments and it is displayed in a table. This table's width is set by 100% and fits nicely with the site's design. However if users post a comment with words that have a lot of characters
(ex: mynameisblahblahaaaaa!!!!!!!!!)
the table will extend over it's container to fit the long string. With normal size words it just reaches the 100% width and goes down to a new line.
I realize I can do a fixed table width but that would involve using pixels and not a % but I feel using pixels would mess up the site on odd dimension browsers...
Is there anyway to fix this?
Here is an example of what I'm talking about:
You can use the CSS word-wrap property set to word-wrap: break-word to instruct the browser to break in between words.
Also, don't use a table for what you're doing -- tables are intended only for tabular data.
You need to set table-layout:fixed in you css
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.
I'm working on a web page where I have a dynamically generated table where certain columns should be of variable width (sizing to the text) and certain columns must always be a specific width. However, the table is inside of a containing div, and firefox is resizing the table such that it stays within the confines of the div. The trouble is, it resizes the columns that must remain a specific width.
Is there any way to force those columns to remain the same size, thus forcing the table to overflow from the div? The div has overflow: auto, which allows you to still see the table, and this is the effect that I am trying to achieve.
Thanks.
You might try styling it with overflow: visible; You could also try floating it, but that opens a whole other can of worms that you probably don't want.
I have several encounters with this problem, I couldn't find a best way to have what I want to display to be displayed/aligned to my needs. Especially so for width of the columns with dynamic text.
Instead of tackling it head-on, I use another approach. I tried to limit the number of characters (variable font-wdith still an issue, need to tweak around) to be displayed on a fixed width column. I'll then add tooltip (via title attribute or tooltip plugins) when mouseover those truncated text.
This is not a direct answer to your requirement, just offering another alternative.