Shogi Table Test

by yasumodev

HTML

<!-- 将棋盤 6x6 右上が00 -->
		<table id="shogi-ban" align="center" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td id="f50" class="field"></td>
			<td id="f40" class="field"></td>
			<td id="f30" class="field"></td>
			<td id="f20" class="field"></td>
			<td id="f10" class="field"></td>
			<td id="f00" class="field"></td>
		<tr>
			<td id="f51" class="field"></td>
			<td id="f41" class="field border-left border-top">
        <img src="https://fiddle.jshell.net/img/logo-white.png">
      </td>
			<td id="f31" class="field border-left border-top"></td>
			<td id="f21" class="field border-left border-top"></td>
			<td id="f11" class="field border-left border-top"></td>
			<td id="f01" class="field border-left"></td>
		<tr>
			<td id="f52" class="field"></td>
			<td id="f42" class="field border-left border-top"></td>
			<td id="f32" class="field border-left border-top"></td>
			<td id="f22" class="field border-left border-top"></td>
			<td id="f12" class="field border-left border-top"></td>
			<td id="f02" class="field border-left"></td>
		<tr>
			<td id="f53" class="field"></td>
			<td id="f43" class="field border-left border-top"></td>
			<td id="f33" class="field border-left border-top"></td>
			<td id="f23" class="field border-left border-top"></td>
			<td id="f13" class="field border-left border-top"></td>
			<td id="f03" class="field border-left"></td>
		<tr>
			<td id="f54" class="field"></td>
			<td id="f44" class="field border-left border-top"></td>
			<td id="f34" class="field border-left border-top"></td>
			<td id="f24" class="field border-left border-top"></td>
			<td id="f14" class="field border-left border-top"></td>
			<td id="f04" class="field border-left"></td>
		<tr>
			<td id="f55" class="field"></td>
			<td id="f45" class="field border-top"></td>
			<td id="f35" class="field border-top"></td>
			<td id="f25" class="field border-top"></td>
			<td id="f15" class="field border-top"></td>
			<td id="f05" class="field"></td>
		</table>

CSS

html,body{
        height: 100%;
        background-color: #888;
			}
      img {
        width: 30%;
        /* max-width: 100%; */
        height: auto;
        transform: rotate( 180deg );
				vertical-align: middle;
      }
			#shogi-ban {
			  width: 100%;
			  height: 100%;
			}
			#shogi-ban img {
				margin: 0px 0px 0px 0px;
			}
			#shogi-ban tr {
			}
			#shogi-ban td.field {
				padding: 0px 0px 1px 0px;
				/*
        width : 50px;
				height : 50px;
        width : auto;
        */
        width : 16.6%;
        /*
        max-width: 16.6%;
        min-width: 16.6%;
        */
				height : 16.6%;
        /*
				max-height : 16.6%;
				min-height : 16.6%;
        */
				text-align: center;
				/*
        vertical-align: middle;
        */
			}
			#shogi-ban td.field.border-top {
				border-top: 1px #666 solid;
			}
			#shogi-ban td.field.border-left {
				border-left: 1px #666 solid;
			}
			#shogi-ban td.field-in.field-movable {
				background-color: #0f0;
			}
			#shogi-ban td.field-in.field-active {
				background-color: #f0c;
			}
			#shogi-ban td.field-out {
				background-color: #6df;
			}
			#shogi-ban td.field-out.field-movable {
				background-color: #0f0;
			}
			#shogi-ban td.field-out.field-active {
				background-color: #f0c;
			}