/    Sign up×
Community /Pin to ProfileBookmark

A way to make the last cell expand?

Copy linkTweet thisAlerts:
Sep 18.2003

I was wondering if there was a nice way to create cells such that the first few are together and evenly spaced, but the last one stretches out to fill out the rest of the table width of 100%?

ie

[ cell 1 ][ cell2 ][ cell3 ][cell 4——————————-]

At the moment Cells 1,2 and 3 spread out and take up most of the space and cell 4 is tiny. I do not want to set the width of Cells 1-3 as the text length will change depending on the language chosen. So somehow I need to tell cell 4 to expand.

Any solution in HTML tables or CSS is welcome! BUT, there’s one tricky thing – I cannot use images (e.g. spacer.gif).

Thanks
Carey

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesSep 18.2003 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

table {width:100%}

th, td {border:solid 1px #a00}

-->

</style>

<table>

<tr>

<th style="width:10%">&nbsp;</th>

<th style="width:10%">Heading</th>

<th style="width:10%">Heading</th>

<th style="width:70%">Heading</th>

</tr>

<tr>

<th>Heading</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<th>Heading</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<th>Heading</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

</table>[/font]
Copy linkTweet thisAlerts:
@careyfauthorSep 24.2003 — Thanks but it's not quite what I was after. I can't set any of cell 1-3 widths, because in fact I don't actually know if there will be 3 or 4 or 7 fields, given that the <td></td> is dynamically generated. I've tried <td width="100%"> in the last cell, but I think it's a bit of a hack.
×

Success!

Help @careyf 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.10,
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,
)...