Forum Announcement

Welcome to the new CNET Forums! Please don't panic. You are not in the Twilight Zone, you are experiencing the new CNET forums platform! Please click here to read the details. Thanks!!

Web Hosting, Design, & Coding

General discussion

I want horizontal squishy, no_wrap behavior for my Table

by vmars956 / April 16, 2010 2:58 PM PDT

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">

Post a reply
Discussion is locked
You are posting a reply to: I want horizontal squishy, no_wrap behavior for my Table
The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our CNET Forums policies for details. All submitted content is subject to our Terms of Use.
Track this discussion and email me when there are updates

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

You are reporting the following post: 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.
Collapse -
How to Truncate_Rightmost content of a given cell? Html
by vmars956 / April 17, 2010 3:02 AM PDT

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...
by John.Wilkinson / April 20, 2010 3:36 AM PDT

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.
by vmars956 / April 20, 2010 6:55 AM PDT

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...
by John.Wilkinson / April 21, 2010 2:49 AM PDT

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

Popular Forums
icon
Computer Help 47,885 discussions
icon
Computer Newbies 10,322 discussions
icon
iPhones, iPods, & iPads 3,188 discussions
icon
Security 30,333 discussions
icon
TVs & Home Theaters 20,177 discussions
icon
HDTV Picture Setting 1,932 discussions
icon
Phones 15,713 discussions
icon
Windows 7 6,210 discussions
icon
Networking & Wireless 14,510 discussions

Tech Tip

Tired of your tricky Wi-Fi password?

Stop trying to memorize a complicated sequence of numbers and letters. Learn how to change the default password.