Мне нужно несколько советов о том, как установить ширину столбцов в таблице HTML.У меня есть простая таблица, которая охватывает всю ширину содержащего div.(Используя ширину таблицы = "100%")
Вот рендеринг:
Чего я хочу добиться, так это чтобы последний столбец "Вес" был точно размер содержащихся элементов.Содержащимися элементами являются ползунок и текстовый ввод.Слайдер перемещается влево.
Сначала я подумал о том, чтобы установить размер меньше необходимого для последнего столбца (например, ширина = "1%"), чтобы столбец автоматически настраивался на минимальный размер.Но тогда проблема в том, что содержимое переносится:
Так как я могу указать фиксированный размер для последнего столбца, который точно соответствует ползунку + входное содержимое, знаячто ползунок имеет фиксированный размер в пикселях, но вход имеет размер, указанный в «em», то есть он будет зависеть от настроек шрифта и т. д.
Edit1
(См. комментарий от Atul Gupta.)
Использование <td style="white-space:nowrap; width:1%">...</td>:
Edit2
Если это может быть важно, управление ползунком фактически берется из: Ненавязчивое управление ползунком V2
Я никогда не разбирался в деталях, но он динамически добавляет к тексту <input>.
Мне удалось получить его плавающим влево, добавив дополнительный класс с float:left;
Немного больше информации:
Слайдер и ввод текста создаются следующим образом:
<input name="w-e2-09" id="w-e2-09" type="text" title="Range: 0 - 100" class="fd_slider fd_jump fd_slider_cn_extraclass" value="50" maxlength="3" size="3" />
fd_slider_cn_extraclass заставляет слайдер внутренне использовать это:
div.extraclass
{
width:120px;
float:left;
}
Если я опускаю float left, текстовое поле переносится на следующую строку, как на втором скриншоте (даже когда есть свободное место).Вот почему я добавил float left.
Edit3
Вот полные HTML-данные строки таблицы (после вставки ползунка JS), предоставленные Firebug:
<tr>
<td><img src="images/buildings/city.png"></td>
<td>Urban Infrastructure</td>
<td class="numeric em">13 <i>(+2)</i></td>
<td class="numeric">10</td>
<td>
<div class="fd-slider extraclass" id="fd-slider-w-e2-09" aria-disabled="false"><span class="fd-slider-inner"></span><span class="fd-slider-bar"></span><button type="button" class="fd-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" style="left: 50px;"> </button></div><input type="text" size="3" maxlength="3" value="50" class="fd_slider fd_jump fd_slider_cn_extraclass" title="Range: 0 - 100" id="w-e2-09" name="w-e2-09">
</td>
</tr>
Ползуноксвязанный CSS доступен по этой ссылке: http://www.frequency -decoder.com / demo / slider-v2 / slider-v2.zip
Edit4
Вот минимальный пример HTML, который демонстрируетвопрос и может служить в качестве лаборатории:
Я заменил слайдер на простой фиксированный размер div.Результат тот же.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Table</title>
</head>
<body>
<div style="width:40em";>
<table width="100%" border="1">
<thead>
<tr><th>Sector</th><th width="1%">Weight</th></tr>
</thead>
<tbody>
<tr>
<td>Urban Infrastructure</td>
<td style="display:inline; white-space:nowrap;">
<div style="width:120px; background-color:#BBB; float:left;"> </div>
<input type="text" value="50" size="3" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>