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

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

17 голосов
/ 17 февраля 2010

У меня есть 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.

Ответы [ 4 ]

3 голосов
/ 17 февраля 2010

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

0 голосов
/ 22 февраля 2010

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

0 голосов
/ 17 февраля 2010

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

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

<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>
0 голосов
/ 17 февраля 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...