ansaurus

Question

Setting width of table cell contents based on available width

Answer 1

A:

Have you considered setting a min-width on the td? or a wrapper div inside the td, but outside the spans?

jonfhancock 2010-02-17 19:17:15

The `td` width is the issue here. The problem isn't that the `td` is getting too narrow. On the contrary, the `td` is exactly as wide as it needs to be. The problem is squeezing the `td`'s contents so that they don't wrap to the next line.

Matt Ball 2010-02-17 19:32:42

Answer 2

+1 A:

Use <td nowrap> or <td style="white-space:nowrap;"> to avoid the wrapping. A table cell should generally expand to fit its contents, unless it is allowed to wrap, or you have constrained its width in some other way.

Ray 2010-02-17 19:24:32

I did try both of those (they do the same thing) but that doesn't work, as I would expect. I have (currently) set an explicit width on the contents of the cell and, yes, the cell width is constrained - that's why I need to shrink its contents in the first place.

Matt Ball 2010-02-17 19:37:26

@bears - scary name! - Well, thought I would try the obvious first. Setting width works only on block -level elements, not on spans. What is the content of your spans? How is the color set? Images? BG colors? ?

Ray 2010-02-17 19:43:52

The spans are empty. Until about 30 minutes before I posted my question, the spans were divs that were `float: left` ed; they behaved exactly the same. I did also play around with using `display: inline-block` to this end. The color is set using a `-moz-linear-gradient` background.

Matt Ball 2010-02-17 19:47:38

Reading more carefully... you want the boxes to be 20 pixels, unless they can't be, and then they should shrink - right? You might be able to do this with script - after the page loads, check the width of the table cell, and then adjust your boxes accordingly, but it might be a pain, and there might be some ugly flashing. Or you could try using a single-row table for your boxes. Give each cell a width of 25% and they should adapt to fit.

Ray 2010-02-17 19:54:26

To your first question: right. I could do this with script, but it would be really ugly, especially since the number of boxes can change between page loads. In an ideal world I would solve this by attaching a listener to the table row, fired by a `heightChanged` event - but this doesn't exist.

Matt Ball 2010-02-17 20:01:08

Answer 3

A:

This sorta kinda seems to do something close to what you want in Firefox 3.6. The crucial requirement seems to be that the table's width cannot be in pixels.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"&gt;

<style type="text/css">
    .indicator {
        display:block;
        white-space:nowrap;
        min-width:8px;
        max-width:300px;
        width:100%;
    }

    .indicator li {
        border:outset 2px;
        display:inline-block;
        height:80px;
        min-width:2px;
        max-width:80px;
        padding:0 0 0 2px;
        width:25%;
    }

    .ok    { background:#0f0 } .caution { background:#ff0 }
    .alert { background:#f00 } .inactive { background:#0ff }

    table { width:100% }
    td { width:100% }

</style>

</head>

<body>

<table><tr><td>
<ul class="indicator">
    <li class="ok"></li> <li class="caution"></li>
    <li class="alert"></li> <li class="inactive"></li>
</ul>
</td></tr></table>

</body>
</html>

Sinan Ünür 2010-02-17 20:00:47

Answer 4

A:

I couldn't find a satisfactory pure-CSS way to do what I wanted. I already had an application config file implemented (like a .ini file, more or less) so I just added my desired width to this config. It's not a general-purpose solution but it fits my requirements just fine.

Matt Ball 2010-02-22 16:08:37

ansaurus

tags:

views:

answers:

Setting width of table cell contents based on available width

related questions