Установка ширины содержимого ячейки таблицы на основе доступной ширины

У меня есть таблица HTML, чьи ячейки содержат, среди прочего, пробелы, например:

...
<td>
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
</td>
...

Я ищу способ уменьшить ширину этих пролетов, а не обертывать их, когда содержащая ячейка таблицы слишком узкая, чтобы показать их все на одной строке. Я пробовал играть с настройкой пролетов max-width на 20px, а затем с использованием процента для ширины, но это не работает, потому что ячейка таблицы пытается быть только такой же широкой, как и ее содержимое.

Минимальная ширина ячейки таблицы - это ширина, необходимая для отображения заголовка на 1 строке.

Для визуальных типов, здесь то, что я сейчас имею, когда имеется достаточная ширина:

enter image description here

Вот что я сейчас имею, когда ширина недостаточно:

enter image description here

И вот то, что я хотел бы, чтобы это выглядело, когда не было достаточной ширины для каждого интервала, чтобы быть полным 20px:

enter image description here

Если это не очевидно, промежутки представляют собой цветные квадраты в столбцах TXEs, RDBs и RavenNets.

Ответы

Ответ 1

Я не смог найти удовлетворительный метод pure-CSS, чтобы делать то, что я хотел. У меня уже был реализован файл конфигурации приложения (например, файл .ini, более или менее), поэтому я просто добавил желаемую ширину в эту конфигурацию. Это не универсальное решение, но оно отлично подходит для моих требований.

Ответ 2

Используйте <td nowrap> или <td style="white-space:nowrap;">, чтобы избежать обертывания. Ячейка таблицы должна, как правило, расширяться, чтобы соответствовать ее содержимому, если только она не разрешена для переноса, или вы ограничили ее ширину каким-либо другим способом.

Ответ 3

Рассматриваете ли вы установку минимальной ширины на td? или обертка div внутри td, но вне интервалов?

Ответ 4

Это похоже на то, что похоже на то, что вам нужно в Firefox 3.6. Важнейшим требованием является то, что ширина таблицы не может быть в пикселях.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" 
href="#" onclick="location.href='http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css'; return false;">

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