/    Sign up×
Community /Pin to ProfileBookmark

table cell not shrinking to minimum width

I trying to achieve the effect in the attached image. There are 3 spans. When the window is wide enough, they all lie on the same line. When the window shrinks, the second span drops to the next line and the 3rd span moves to the immediate right of the first span.

[CODE]
<html>
<head>
<style type=”text/css”>
td { border: 1px solid orange; }
.a, .b { display: inline-block; }
.a { color: red }
.b { color: blue }
</style>
</head>
<body>
<table><tr>
<td><span class=”a”>Happy Days! Joyous Days! Celebrations are in order!</a> <span class=”b”>Some long text here</span></td>
<td>Whee</td>
</tr></table>
</body>
</html>
[/CODE]

Unfornately, the table cell doesn’t shrink ?

Any ideas? Thanks in advance!

[upl-file uuid=3ba6ebe3-7d3e-4f44-9371-a94a9405880f size=19kB]wrapping.png[/upl-file]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@yilangmokauthorSep 13.2009 — When the window is long enough:

[A little bit of text] [Another little bit of text] [span 3]

But when the window is made too small to contain it on one line:

[A little bit of text] ------- [span 3]

[Another little bit of text]
×

Success!

Help @yilangmok spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...