前回の続きです。HTMLのレイアウトを一応完成させました。
列ごとの設定には少し手間取りました。複数tableの設定に関するネット情報は調べた範囲では見当たりませんでした。まあ情報が乏しくても推測で分かると思います。
body {
background-color: #f0f8ff;
}
th {
text-align: center;
}
.container {
display: block;
}
#tableA{
background-color: #ffffe0;
margin: 15px 5px 15px 5px;
}
#tableB{
background-color: #e0ffff;
margin: 15px 5px 15px 5px;
}
#tableC{
background-color: #7fffd4;
margin: 15px 5px 15px 5px;
}
#tableB tr td:nth-of-type(1){text-align: right} /* 着順 */
#tableB tr td:nth-of-type(2){text-align: right} /* 枠番 */
#tableB tr td:nth-of-type(3){text-align: right} /* 馬番 */
#tableB tr td:nth-of-type(4){width: 160px;padding:0 0 0 5px} /* 馬名 */
#tableB tr td:nth-of-type(5){text-align: center} /* 性齢 */
#tableB tr td:nth-of-type(6){text-align: right;width: 45px} /* 斤量 */
#tableB tr td:nth-of-type(7){width: 80px;padding:0 0 0 5px} /* 騎手 */
#tableB tr td:nth-of-type(8){width: 60px} /* タイム */
#tableB tr td:nth-of-type(9){text-align: left} /* 着差 */
#tableB tr td:nth-of-type(10){text-align: left} /* 通過 */
#tableB tr td:nth-of-type(11){text-align: right;width: 45px;} /* 上り */
#tableB tr td:nth-of-type(12){text-align: right; width: 45px} /* 単勝 */
#tableB tr td:nth-of-type(13){text-align: right} /* 人気 */
#tableB tr td:nth-of-type(14){width: 85px;padding:0 0 0 5px} /* 馬体重 */
#tableB tr td:nth-of-type(15){width: 100px} /* 調教師 */
#tableB tr td:nth-of-type(16){padding:0 0 0 5px} /* 馬主 */
#tableB tr td:nth-of-type(17){text-align: right} /* 賞金 */