Make table cell width exactly the width of the content within

[denno020]

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

[requinix]

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)?

[denno020]

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

[denno020]

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]

[mattyvx]

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)

[denno020]

Good work buddy, that's exactly what I needed.

 

Cheers

Denno