テーブル・スタイルのカスタマイズ
Zen コンポーネントでは、スタイルの制御に Cascading Style Sheets (CSS) を使用します。コンポーネントには独自の既定のスタイルがあります。ユーザ独自の CSS スタイル定義を提供して、これらのスタイルをオーバーライドすることができます。Zen アプリケーションには、スタイル情報を配置できる場所が他にも多数あります。スタイル情報を配置する場所に応じて、アプリケーション全体、個々のページ、または個々のコンポーネントの既定のスタイルをオーバーライドできます。ここでは、このページ上でのみ既定のスタイルをオーバーライドするために、HomePage.cls にスタイル情報を配置します。
ウィザードでは、既に <style> の開始タグと終了タグを XData Style ブロックに追加しています。CSS スタイル定義は、これらのタグの間に配置します。
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}
次に、CSS スタイル定義をいくつか追加します。最初の定義は、ページ本文で使用されるフォントを制御します。残りの定義は、tablePane の既定のスタイルをオーバーライドします。これにより、HomePage.cls に配置されているすべての tablePane のスタイルが制御されるので注意してください。
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/*Style classes for use on this page */
body { font-family: arial; }
table.tpTable caption{
background: transparent;
font-size: 1.4em;
font-weight: bold;
text-align: left;
border: none;
}
/* even rows */
.tpEven { color: black; background: #ebf3ff; }
/* odd rows */
.tpOdd { color: black; background: white; }
/* this is a selected row */
table.tpTable tr.tpSelected { background: #3d80df; color: white; }
/* hover for odd and even rows */
tr.tpOdd:hover,tr.tpEven:hover {
background-color: #3d80df;
color: #ffffff; }
/* table header style */
table.tpTable th {
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background: #C5D6D6;
color: black;
font-weight: bold;
text-align: left;
padding: 2px;
overflow: hidden;
}
/* selected column header (th) */
table.tpTable th.tpHdrSelected { background: #3d80df; }
/* filter layout */
table.tpFilterLayout td { border: none; background: #C5D6D6; }
</style>
}
tablePane のスタイルの制御に使用される CSS セレクタは、%ZEN.Component.simpleTablePaneOpens in a new tab (%ZEN.Component.tablePaneOpens in a new tab のスーパー・クラス) クラス定義で使用されるセレクションと同じです。
