Solved

dynamic table width

Posted on 2008-06-24
6
1,534 Views
Last Modified: 2008-06-30
hi there; i have a 700px table with 2 columns and many rows.

the first column has to be a dynamic width (i.e. as long as the longest content ... so if row 1 is 200px and row 2 is 240px and row 3 is 140px then the entire column will be 240px)

the second column has to be the remaining width (i.e.  if column 1 is 240px then column 2 is 460px ... if column 1 is 200px then column 2 is 500px etc ...)

can someone explain how i would accomplish this.

thanks.
0
Comment
Question by:vbnewbie01
6 Comments
 
LVL 2

Accepted Solution

by:
mriz81 earned 100 total points
ID: 21859086
You can achieve this by setting with of your second column to 700 and leave width attribute for first column. So a code like below can work for you
<table width="700" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td>TestString</td>

    <td width="700">&nbsp;</td>

  </tr>

  <tr>

    <td>TestString_TestString</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>TestString_TestString_TestString</td>

    <td>&nbsp;</td>

  </tr>

</table>

Open in new window

0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 21859126
why don;y you use % FOR THE WIDTH
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 21860390
hi, erikTsomik; how would using percentage retain the exact width of the longest text in the first column?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 4

Expert Comment

by:msfletch
ID: 21860518
You can try this:

<table width=700>
<tr>
    <td width=10 nowrap>Width 10 means at least ten, with no wrap it will stretch to fit content.</td>
    <td width="*">Star means everything left over to the width of the table</td>
</tr>
</table>
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 21861487
hi, msfletch; thanks for your suggestion.  i think i will go with mriz81's suggestion as i prefer not to have any minimum widths.  still waiting for erikTsomik's response before i ultimately decide though.  thanks again.
0
 
LVL 4

Expert Comment

by:msfletch
ID: 21861516
At least you have something that works! =) The answer to erikTsomik's question is that it wouldn't retain the exact width.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now