MyFaces/Tobagoで表のスタイルを変更する

MyFaces 4.1.3
Tobago 6.11.0

先日の続き。
saku-jp.hatenablog.com
MyFaces/Tobagoのstandardなテーマの素のスタイルで表示するとこんな感じ。

余白

表示してる文字との比で余白を取った方がいいかな？と単位をrem→chにしてみた。

html {

}
.tobago-auto-spacing {
  margin-bottom: 0.25ch;
}
.col-form-label {
	padding: 0.25ch;
}
.form-control {
	padding: 0.25ch 0.25ch;
}
.form-control-plaintext {
	padding: 0 0.25ch;
	line-height: 1.4;
}
.form-select {
	padding: 0.25ch 4ch 0.25ch 0.25ch;
}
.btn {
	padding: 0.25ch 0.75ch;
}

枠線と背景色(ExcelというかSpreadsheetというか表計算シート風)

ヘッダーとデータのセル（行）のスタイルとマウスでホバーした時の色とか。
　　
tc:sheetタグにcustomClass="spreadsheet"を指定して。

<tc:sheet value="#{trialPageBean.list}" var="detail" id="detailList"
  customClass="spreadsheet">

spreadsheet配下のスタイルを定する。

/* ヘッダーセル（th） */
.spreadsheet .table th {
	background-color: #cccccc !important;
	border: 1px solid #d4d4d4 !important;
	padding: 2px 2px !important; 
	vertical-align: middle !important;
}

/* データセル（td） */
.spreadsheet .table td {
	border: 1px solid #e2e2e2 !important;
	padding: 0px 0px !important; 
	vertical-align: middle !important;
	background-color: #ffffff;
}

/* 1行おき（偶数行）の背景色 */
.spreadsheet tr:nth-child(even) td {
	background-color: #e8e8e8 !important;
}

/* 行ホバーと選択時の色 */
.spreadsheet tr:hover td {
	background-color: #e6f0de !important;
}

日付のと金額のフォーマット

ZonedDateTime型だったので、f:convertDateTimeタグにtype="zonedDateTime"を追加する。
金額はシンプルに。
　

<tc:column label="日付">
  <tc:out value="#{detail.dateTime}">
    <f:convertDateTime type="zonedDateTime" pattern="yyyy/MM/dd"
      timeZone="Asia/Tokyo"/>
  </tc:out>
</tc:column>
<tc:column label="金額">
  <tc:out value="#{detail.amount}">
    <f:convertNumber type="currency" currencySymbol="¥" locale="ja_JP" />
  </tc:out>
</tc:column>

中央揃え、左揃え、右揃え

ヘッダをセンタリングして、データの各列を中央揃え、左揃え、右揃えにしてみる。
（判りやすくするために列幅を指定）

ヘッダのセンタリングはスタイルにtext-align: centerを追加。

/* ヘッダーセル（th） */
.spreadsheet th {
  background-color: #cccccc !important;
  border: 1px solid #d4d4d4 !important;
  padding: 2px 2px !important; 
  vertical-align: middle !important;
  text-align: center !important;
}

データはスタイルを追加して、tc:outタグにcustomClass="cell-*"を指定する。

/* データセル（td）で中央揃え */
.spreadsheet td span.cell-right {
  width: 100% !important;
  text-align: center !important;
}

/* データセル（td）で左揃え */
.spreadsheet td span.cell-right {
  width: 100% !important;
  text-align: left !important;
}

/* データセル（td）で右揃え */
.spreadsheet td span.cell-right {
  width: 100% !important;
  text-align: right !important;
}

<tc:column label="日付">
  <tc:out value="#{detail.dateTime}" customClass="cell-center">
    <f:convertDateTime type="zonedDateTime" pattern="yyyy/MM/dd"
      timeZone="Asia/Tokyo" />
  </tc:out>
</tc:column>
<tc:column label="金額">
  <tc:out value="#{detail.amount}" customClass="cell-right">
    <f:convertNumber type="currency" currencySymbol="¥" locale="ja_JP" />
  </tc:out>
</tc:column>