Jump to content

[SOLVED] How can I make the width stay and allow the height of the cell to grow.


Recommended Posts

I have developed codes in php.

I read and display data from MySQL.

I noted that when the length of the data (sentence length) is wider than the table’s cell’s width, the cell gets wider at run time.

How can I make the width stay and allow the height of the cell to grow to accommodate long sentence.

Widening of cell is unsightly.

Thanks.

 

You can try adding this CSS to your display area:

overflow: auto;

(or other variants http://www.w3schools.com/Css/pr_pos_overflow.asp)

 

If that is not what you want, you will have to use javascript/php to trim the line lengths and split the content so that it doesn't go over a set character count.

Thanks,

I tried your suggestion, it does not work.

I have to mention, all my formatting of pages are based on tables and tables in tables.

If I need to do php codes for each cell "I will die" because I have an assorment of cells in many pages.

Is there a auto word wrap or a way to force fix the width and loosen up the height.

 

I'm not sure of a way to do this with CSS... especially with tables.

 

Like I said, perhaps you could use php or javascript to format the text to a set width... but otherwise, I'm not sure.

Thanks,

 

Can we tell the page hey don't widen the cell for any reason.

 

Sorry don't mistake me, writing a script for this may be a bit too much, ok I am lazy; not really, I have many combinations of cell widths and pages.

does this widening get corrected on final render? ie is it just the browser displaying things until its worked out what dimensions to give elements?

 

if not and you want certain elements to have a fixed width, give them a fixed width. the only time when this would possibly fall over is when the content does not permit wrapping. eg an image that is wider than the specified width of textual content with no breaking spaces in it or if you have inadvertently placed white-space: no-wrap on an element that affects this portion of layout.

with css you can set a width to the <td> like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
table td {
width:50px;
}
</style>
</head>
<body>
<table>
<tr><td>test 1</td><td>test 2 test 2 test 2</td></tr>
</table>
</body>
</html>

 

results in:

             test 2
test 1       test 2
             test 2

I thank both of you, you people are right, I am trying to get away with the no space long sentence, I have no image, so image is not really an issue for me, but thanks for the note.

I tried the following, it works, but strangely enough, if I use any other name other than "div", it does not work, I can't understand. I am trying to create more functions, so that I will have a few cells taken care of respectively.

 

<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>

 

CroNix, i will try your suggestion as well.

Using a div instead of a table cell?

 

<div style="width: 100px; overflow: auto;">
test test test test test testtesttesttesttesttestesttesttesttesttesttestesttesttesttesttesttestesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>

 

Look at that (by itself) and you'll see it add scroll bars for overflowing content...  You can even fake some tables using divs if you want.. depends on how you want to display your data.  Got an example online?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.