Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing which <TD> stretches. NEED HELP!

Status
Not open for further replies.
Aarem

Aarem

Programmer
Oct 11, 2004
69
US
Hi. Say I have a 2 column table, and both td tags on the top have background images.
I have another row, with one <TD> tag, colspan of 2. Now, how can I make the first column be just wide enough to support the text, while the other one stretches to fit the excess width the lower part takes up?

For you vision-oriented programmers (probably most of you in CSS are) out there, an example:

<table>
<TR>
<TD bgcolor=green>
Top left
</TD>
<TD bgcolor=red>

</TD>
</TR>
<TR>
<TD colspan=2>
Hello there, world! See what I mean? The left stretches, rather than the right. How can I fix it so the second column stretches, leaving the left column at its minimum width?
</TD>
</TR>

</table>
 
Sort by date Sort by votes
Add a static width to the first table cell.

Code: 
<table><tr>

<td style="background-color: green; width: 200px;">Top left</td>
<td style="background-color: red;"></td>

</tr><tr>

<td colspan=2>
Hello there, world! See what I mean? The left stretches, rather than the right. How can I fix it so the second column stretches, leaving the left column at its minimum width?
</td>

</tr></table>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
I suppose technically that should work, but it doesn't. Anyway, that's not the goal I'm trying to accomplish. I want to get the left <TD> the minimal width it can be. No wider. Let me know.
 
Upvote 0 Downvote
Give it a width of 1px then.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
better yet, why use this method at all? Why not just use divs within the first row's cell? What are you trying to achieve?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>

<head>
    <title>Untitled</title>
</head>

<body>      

<table><tr>

<td style="background-color: green; width: 1px;">Top left</td>
<td style="background-color: red; width: 100%;"></td>

</tr><tr>

<td colspan="2">
Hello there, world! See what I mean? The left stretches, rather than the right. How can I 

fix it so the second column stretches, leaving the left column at its minimum width?
</td>

</tr></table>

</body>

</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
205
tyutghf
tyutghf
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
312
lucasbrown
lucasbrown
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
469
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top