/    Sign up×
Community /Pin to ProfileBookmark

Problem with overflow in tables.div

Copy linkTweet thisAlerts:
Sep 02.2008

Hi,
I have a problem that couldn’t solve.

I need a text to fit in a cell of table using the overflow value without having the cell to stretch.

I have some constraints: I can’t set the table and cell width, but I can add other code to include the table in another tag.

Example:
This is the style definition

[CODE].post-text {
width: 99%;
overflow: auto;
}[/CODE]

This is the code working fine:

[CODE]<div style=”width:320px;”>
<div class=”post-text”>
CiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiao
</div>
</div>[/CODE]

This is the code not working because of stretching:

[CODE]<div style=”width:320px;”>
<table width=”100%”>
<tr>
<td width=”100%”>
<div class=”post-text”>
CiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiaoCiao
</div>
</td>
</tr>
</table>
</div>[/CODE]

Why the width of the higher level DIV is overridden by the table?

Is there a way to have overflow control in a table without having to specify cell width with a fixed value?

Thank you very much.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Sep 02.2008 — Use reasonable test text and you'll have better luck.
Copy linkTweet thisAlerts:
@Mighty_GorgonauthorSep 02.2008 — Use reasonable test text and you'll have better luck.[/QUOTE]
That text is just an example... if you don't like it I'll make another one.

[CODE]<div style="width:520px;">
<table width="100%">
<tr>
<td width="100%">
<div class="post-text">
&lt;div&gt;&lt;b&gt;{postrow.SINGLE_POST}&nbsp;&nbsp;&nbsp;&lt;/b&gt;{postrow.POST_DATE}&lt;b&gt;&nbsp;&nbsp;{postrow.POST_EDIT_STRING}&nbsp;&lt;/b&gt;&lt;/div&gt;
</div>
</td>
</tr>
</table>
</div>[/CODE]

This is part of a style for a developer community and I need a way to add overflow in a table cell without having to set the fixed width to that cell.
Copy linkTweet thisAlerts:
@CentauriSep 03.2008 — If it works without the table, why have the table there at all??
Copy linkTweet thisAlerts:
@Mighty_GorgonauthorSep 03.2008 — If it works without the table, why have the table there at all??[/QUOTE]

That code I provided is part of a more complex code.

The table isn't a "one-cell" table, but a multicolumn table, and one of the column may have text which overflow the cell width itself.

I don't want to insert a fixed width for that cell because I would like that cell to wide up as much as that can to show up as much text as possible without stretching the page if there is contiguous text without spaces.

I have posted a simple example just to show you what the problem is with a table within a div with fixed width.

I need a solution for that case, and I guess the best thing I have found so far is setting the display property of the outer DIV to "table-cell" (I found this yesterday night). But I would like to know if there is some other method that I'm missing.

Just to add another element (hoping to avoid other sarcastic or implicit answers) this code is part of a complex code in a dinamyc site, the HTML is injected via PHP with the output, I have used a simple example because with the original code you couldn't easily understand what and where the problem is.

Thanks.
×

Success!

Help @Mighty_Gorgon 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...