Как управлять выравниванием DataTable внутри PanelGrid?
У меня есть настройка столбца Grid с несколькими столбцами, с таблицами данных в качестве каждого из столбцов. Каждый из таблиц данных имеет разную длину. Это приводит к тому, что панель Grid растягивается до самой большой таблицы данных (пока это хорошо). Остальные таблицы данных располагаются по центру по вертикали (это нехорошо, так как на экране это выглядит ужасно), а не по верхнему выравниванию.
Как я могу сказать panelGrid для выравнивания по верху содержимого? Или мой подход совершенно неправильный, и мне нужно сделать что-то другое (если да, предложения приветствуются)?
1 ответ
JSF отображается как HTML и может быть оформлен с помощью CSS. Проверьте элемент следующим образом:
- Просмотрите страницу JSF в браузере.
- Щелкните страницу правой кнопкой мыши.
- Выберите Просмотреть источник.
Предполагая, что Если сетка является частью формы, CSS должен будет включать идентификатор формы.Например: CSS будет выглядеть следующим образом: Вот пример HTML-документа, в котором показано вертикальное выравнивание, работающее в таблице, настроенной с помощью CSS: Все выравнивается по верхнему краю. Без правила все становится центрированным. Трудно сказать, какое именно правило вам нужно применить, поскольку неясно, как выглядит сгенерированная вами разметка. См. также:;
. Элементы данных вложены в элемент
, отображаемый с помощью vertical-align элемента элемента top.
id, который заканчивается как в HTML, используйте следующее CSS:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Формы
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Пример
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
Учебники
Похожие вопросы: