Jump to content

Make table cell width exactly the width of the content within


Recommended Posts

This seems like it would be fairly simple, but for the life of me I can't work it out.

 

What I want to do is have table cells that are only as wide as the content within them. The content will be all different sizes, so I can't have just one set width.

 

What I want to achieve is for like a blogging system:

Title|Author

Longer Title|Author

Very Much Longer Title|Author

 

So the author will be tacked from onto the end of the title. I can't put them on the same line as they will have different styling, so I need them to be separated somehow. Anyone have any ideas?

 

I don't have to use tables. If I can do it with div's, then please let me know.

 

Cheers

Denno

Do you mean

Title | Author
Longer Title | Author
Much Longer Title | Author

(something not suitable for tables) or

Title             | Author
Longer Title      | Author
Much Longer Title | Author

(which is what tables do by default)?

No sorry, I gave three seperate examples. They won't be in the same table themselves, they're just three examples of how titles will display.

 

Basically, I want the author name to be directly after the title, but seeing as though each title could be different lengths, I need the table cell's width to be dynamic (and to be as small as possible without making the content wrap around onto a new line).

 

I'll draw a mockup in fireworks right now to show what I mean if that still doesn't clear it up.

 

Denno

Ok so I've drawn up a really quick mock up. You'll see in the picture that there are two tables. Each with a title, and an author. One title is longer than the other, hence the wider table cell needed. The author is printed directly after the title, no matter how long or short it is.

 

I have tried to put a div around just the title, but that makes the author print on the next line. Same if I apply a heading tag to the title, the author will be printed on the next line.

 

If there are any other work arounds, without using tables or divs or anything, just using CSS tricks, then I'm open to all of that too.

 

Thanks

Denno

 

[attachment deleted by admin]

There are several ways you can do it, and I'd personally use <div> and not use tables atall, unless there is a specfic reason you have chosen the table element.

 

Solution;

 

Do something like;

 

<div class="blogcontainer" >

<div class="blogheader">
<h2>Blog Title <span class="Author">by Blog Author</span></h2>
</div>

<div class="blogcontent">
<p>
  Your content goes here
</p>
</div>

</div>

 

Do you really need two columns? Using the above layout lets you use just one column for the header section.

 

Do some research on CSS and style your boxes and text as you want. (Setting width,height,font size etc as required)

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.