連絡ブログ
汎用的に使用できる試合結果表示のテーブルを設計しました
「活躍する三田ソフトテニス倶楽部会員 」で使用していますので例としてみて下さい。
今後テンプレートとして、利用できるようにHTMLコードとCSSをスタイル属性で記載しました。
スタイルの内容は、
- テーブルは、最大値800px、800px以下のビューでは100%幅。
- 試合名称、ラウンドに関しては、セル下にグレーのライン表示。
- セル（td）内の文字は縦横センタリング。
- 左右対称のレイアウトとなるようにcol_nameクラスとcol_scoreクラスに％によるwidth指定。
縦罫線を表示しないため、あえてセル内のパディングは、取っていません。
以下、サンプル。
<table class="tableizer-table table_match">
<tbody>
<tr>
<td colspan="5" class="col_match">大会名</td>
</tr>
<tr>
<td colspan="5" class="col_round">ラウンド</td>
</tr>
<tr>
<td class="col_name">（A）個人名・ペア名等</td>
<td class="col_score">（A）得点</td>
<td> - </td>
<td class="col_score">（B）得点</td>
<td class="col_name">（B）個人名・ペア名等</td>
</tr>
<tr>
<td>（A）クラブ名・学校名等</td>
<td> </td>
<td> </td>
<td> </td>
<td>（B）クラブ名・学校名等</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<style>
.table_match{
width: 100%;
max-width: 800px;
text-align: center;
vertical-align: top;
}
.table_match td{
text-align: center;
vertical-align: top;
}
.col_match{
border-bottom:1px solid #CCC;
}
.col_round{
border-bottom:1px solid #ccc;
}
.col_name{
width: 40%;
}
.col_score{
width: 5%;
}
</style>