How to make a table with table-cell-widths, which each of them is fit to its content

Question

I'm impeded by an issue:
In IE6, table-cell doesn't fit to its content. Though I've been trying to put content into a div/span etc. with correlative properties, the table-cell stretches to have its width greater than its content's. Anyone give me ideas to solve it?

Answer 1

If I'm understanding your question and the comments correctly, you're looking for a way to make the table cell just barely big enough to fit the content. Your best bet would be javascript that reads the content of each cell and then sets the width.

If you want a pure CSS solution, you should set the width of the cell to something very small - 0.01em for example. Then, no matter what you put in the cell, it will be totally filled. See the third table at http://jsfiddle.net/75Pv2/ for an example.