CSS Style solution

by Jithin Raj P R

HTML

<table id='leftT' class='tlist'>
  <tr>
    <th></th>
    <th id='a1'>1</th>
    <th id='a2'>2</th>
    <th id='a3'>3</th>
    <th id='a4'>4</th>
    <th id='a5'>5</th>
    <th id='a6'>6</th>
    <th id='a7'>7</th>
    <th id='a8'>8</th>
  </tr>
  <tr>
    <th id='left1'>15/F</th>
    <td id='f1501'>
      <div>1501</div>
    </td>
    <td id='f1502'>
      <div>1502</div>
    </td>
    <td id='f1503'>
      <div>1503</div>
    </td>
    <td id='f1504'>
      <div>1504</div>
    </td>
    <td id='f1505'>
      <div>1505</div>
    </td>
    <td id='f1506'>
      <div>1506</div>
    </td>
    <td id='f1507'>
      <div>1507</div>
    </td>
    <td id='f1508'>
      <div>1508</div>
    </td>
    <th id='right1'>15/F</th>
  </tr>
  <tr>
    <th></th>
    <td id='f1401'>
      <div>1401</div>
    </td>
    <td id='f1402'>
      <div>1402</div>
    </td>
    <td id='f1403'>
      <div>1403</div>
    </td>
    <td id='f1404'>
      <div>1404</div>
    </td>
    <td id='f1405'>
      <div>1405</div>
    </td>
    <td id='f1406'>
      <div>1406</div>
    </td>
    <td id='f1407'>
      <div>1407</div>
    </td>
    <td id='f1408'>
      <div>1408</div>
    </td>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <td id='f1301'>
      <div>1301</div>
    </td>
    <td id='f1302'>
      <div>1302</div>
    </td>
    <td id='f1303'>
      <div>1303</div>
    </td>
    <td id='f1304'>
      <div>1304</div>
    </td>
    <td id='f1305'>
      <div>1305</div>
    </td>
    <td id='f1306'>
      <div>1306</div>
    </td>
    <td id='f1307'>
      <div>1307</div>
    </td>
    <td id='f1308'>
      <div>1308</div>
    </td>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <td id='f1201'>
      <div>1201</div>
    </td>
    <td id='f1202'>
      <div>1202</div>
    </td>
    <td id='f1203'>
      <div>1203</div>
    </td>
    <td id='f1204'>
      <div>1204</div>
    </td>
    <td id='f1205'>
      <div>1205</div>
    </td>
    <td id='f1206'>
      <div>1206</div>
    </td>
    <td...

CSS

body {
  width: 1340px;
  text-align: center;
}

.tlist {
  display: inline;
  border-collapse: separate;
  border-spacing: 2px 7px;
}

#rightT {
  padding-left: 115px;
}

.tlist th {
  font-size: 160%;
  font-family: Sans-serif;
}

.tlist td {
  width: 56px;
  height: 54px;
  border: 1px solid lightgrey;
}

.tlist td div {
  position: absolute;
  border: 1px solid lightgrey;
  width: 45px;
  color: white;
  background-color: orange;
  font-family: arial;
  font-size: 120%;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 11px;
  padding-left: 1px;
  padding-right: 1px;
  margin-top: -24px;
  margin-left: 3px;
}

.tlist td div.changeColor {
  color: black;
  background-color: white;
  border-color: red;
}

#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
  text-align: right;
}

#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
  text-align: left;
}

@keyframes styleIt {
  0% {}
  25% {
    transform: scale(1.5) rotate(0deg)
  }
  70% {
    transform: scale(1.5) rotate(360deg);
  }
  100% {
    transform: scale(1);
    color: black;
    background-color: white;
    border-color: red;
  }
}

.changeStyle {
  animation: styleIt 1s forwards;
}

JavaScript

$(document).ready(function() {
  $('.tlist td div').click(function() {
    var t = $(this)
    t.removeClass('changeStyle');
    setTimeout(function() {
      t.addClass('changeStyle');
    }, 10);
  });
});