General discussion

I want horizontal squishy, no_wrap behavior for my Table

I have a webPage of nothing but DropDown Menus each containing links of a specific Category. Typically it shows 4 DropDowns per page.
The height="100%" for TABLE works fine: as I manually shrink the window height, the DropDowns get closer and closer together, vertically.
But how can I get this same squishy behavior for the Table_width, maybe I could call it Squishy_No_wrap behavior. Where: as I shrink the window width, the DropDowns get narrow-er and narrow-er, from right to left? Below is an mini-sampling of what my code looks. If you's like me to post the whole thing, let me know. (I say no_wrap because I don't think its possible to wrap a DropDown_Menu.)
Thanks...vmars

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><col width=10%>
<center>
<tr><td width="15%" align="center" valign="middle">
<form name="HotBasic">
<select style="font-size:14px;color:#000000;font-family:Verdana;background-color:#ffffff;" name="menu" onChange="location=this.options[this.selectedIndex].value;">
<option value="">HotBasic</option>
<option value="http://tech.groups.yahoo.com/group/hotbasic/">HotBasic Support Group @ Yahoo</option>
<option value="http://mypages.cwdom.dm/keenej/hotbasic.html">HotBasic Home Page</option>
</select></form>
</td><td width="15%" align="center" valign="middle">
<form name="Miscellaneous">

Discussion is locked
Follow
Reply to: I want horizontal squishy, no_wrap behavior for my Table
PLEASE NOTE: Do not post advertisements, offensive materials, profanity, or personal attacks. Please remember to be considerate of other members. If you are new to the CNET Forums, please read our CNET Forums FAQ. All submitted content is subject to our Terms of Use.
Reporting: I want horizontal squishy, no_wrap behavior for my Table
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Comments
- Collapse -
How to Truncate_Rightmost content of a given cell? Html

winXP sp2, chrome
Maybe i am using the wrong words, squishy/nowrap.
The effect i am after is for example, Notepad.
Where if i have noWrap on, and the notepadWindow is set to maybe ~50%.
If i have long lines of text, with noWrap, the rightmost portions of those long lines gets TRUNCATED.
That's the effect i am after. Where the DropDown_Menus is (purposely) to large for the TD cell.
Maybe this is a better way to say: How to Truncate_Rightmost content of a given cell?
Thanks...vmars

- Collapse -
If you have not resolved the issue yet...

Note that you can stylize nearly any element using CSS, making it possible to set a variable width (example: width:25%) for the select/option tags. Note that you should also set a minimum width (example: min-width:100px), for if the browser window is too small, the content may 'squish' to a width at which no text is visible.

John

- Collapse -
I didn't know abour min-width.

Here's pretty much what I wanted:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>No title</title>
</head>

<body vlink="purple" alink="red" bgcolor="white" link="blue" text="black">

<table width="624" border="1">
<tbody>
<tr>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
</tr>
</tbody>
</table>

<p>

- Collapse -
Reference guide...

W3Schools is a good place for introductory information and tutorials for a variety of languages, including CSS and HTML. Once you get comfortable with CSS, you can use it to reduce/eliminate your reliance on the table-based layout as well as attributes (such as width, border, bgcolor, etc.) and tags (such as center) that have been deprecated (should no longer be used) under XHTML1.0/1.1 and HTML5. You can also use classes to eliminate the repeated application of inline CSS rules using the style attribute.

Hope this helps,
John

CNET Forums