Stackoverflow - cols, colgroups and css :hover psuedoclass

http://stackoverflow.com/q/848840/918414

by David McClelland

HTML

<table>
  <tr>
    <th></th>
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
  </tr>

  <tr>
    <th class="row">160cm</th>
    <td>20</td>
    <td>21</td>
    <td>23</td>
    <td>25</td>
    <td>27</td>
    <td>20</td>
    <td>21</td>
    <td>23</td>
    <td>25</td>
    <td>27</td>
  </tr>

  <tr>
    <th class="row">165cm</th>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>26</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>26</td>
  </tr>

  <tr>
    <th class="row">170cm</th>
    <td>17</td>
    <td>19</td>
    <td>21</td>
    <td>23</td>
    <td>25</td>
    <td>17</td>
    <td>19</td>
    <td>21</td>
    <td>23</td>
    <td>25</td>
  </tr>

  <tr>
    <th class="row">175cm</th>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
  </tr>
    <tr>
    <th class="row">175cm</th>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
  </tr>  <tr>
    <th class="row">175cm</th>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
  </tr>  <tr>
    <th class="row">175cm</th>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
  </tr>  <tr>
    <th class="row">175cm</th>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
    <td>16</td>
    <td>18</td>
    <td>20</td>
    <td>22</td>
    <td>24</td>
  </tr>  <tr>
   ...

CSS

table {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
}

td,
th,
.row,
.col {
  cursor: pointer;
  padding: 10px;
  position: relative;
}

td:hover::before,
.row:hover::before {
  background-color: #ffa;
  content: '\00a0';
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -1;
}

td:hover::after,
.col:hover::after {
  background-color: #ffa;
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}