Chess board is now a table

assets/css/_board.scss

@@ -1,8 +1,4 @@
-
 .board {
-  display: flex;
-  flex-direction: column;
-  font-size: 0;
   border: 0.3vmin solid black;
   margin: 0 auto;
   width: 80vmin;
@@ -10,16 +6,10 @@
 }
 
 .board-rank {
-  height: 12.5%;
 }
 
 .board-square {
-  position: relative;
   border: 0.2vmin solid $square-outline-color;
-  display: inline-block;
-  font-size: $base-font-size;
-  width: 12.5%;
-  height: 100%;
 
   background-size: 100%;
   background-repeat: no-repeat;
@@ -39,7 +29,7 @@
 
   &.selected {
     background-color: mix($black-square-color, $selected-square-color, 60%);
-    border: 0.2vmin solid $selected-outline-color;
+    outline: 0.2vmin solid $selected-outline-color;
   }
 }
 
@@ -48,7 +38,7 @@
 
   &.selected {
     background-color: mix($white-square-color, $selected-square-color, 60%);
-    border: 0.2vmin solid $selected-outline-color;
+    outline: 0.2vmin solid $selected-outline-color;
   }
 }
 

assets/js/components/chess-board-square.js

@@ -60,7 +60,7 @@ class ChessBoardSquare extends React.Component {
   }
 
   render() {
-    return <div
+    return <td
       id={this.squareId()}
       className={this.squareClass()}
       onClick={this.selectSquare.bind(this)}

assets/js/components/chess-board.js

@@ -43,15 +43,19 @@ class ChessBoard extends React.Component {
 
     return _.map(Object.keys(board).reverse(), (rankId) => {
       return (
-        <div className="board-rank" key={rankId}>
+        <tr className="board-rank" key={rankId}>
           {this.renderFiles(rankId)}
-        </div>
+        </tr>
       );
     });
   }
 
   render() {
-    return <div className="board">{this.renderRanks()}</div>;
+    return (
+      <table className="board">
+        <tbody>{this.renderRanks()}</tbody>
+      </table>
+    );
   }
 }