Skip to content

Instantly share code, notes, and snippets.

@GreLI GreLI/dabblet.css
Last active Dec 18, 2015

Embed
What would you like to do?
Untitled
table {
position: relative;
}
th,
td {
counter-increment: col;
}
th:first-child {
text-align: right;
counter-reset: col;
}
th,
td,
th:hover:before,
td:hover:before {
border: 1px solid lightgrey;
padding: 10px;
width: 1.75em;
text-align: center;
vertical-align: middle;
cursor: default;
}
tr:hover th:first-child,
td:hover {
background: grey;
border-color: grey;
color: #fff;
}
th:hover:before,
td:hover:before {
display:block;
position: absolute;
z-index: 1;
top: 2px;
margin-left: -11px;
border-color: grey;
font-weight: bold;
background: grey;
color: #fff;
content: counter(col);
}
<table>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col">10</th>
</tr>
<tr>
<th scope="row">2</th>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
<td>30</td>
</tr>
<tr>
<th scope="row">4</th>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
<td>40</td>
</tr>
<tr>
<th scope="row">5</th>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
<td>50</td>
</tr>
<tr>
<th scope="row">6</th>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
<td>60</td>
</tr>
<tr>
<th scope="row">7</th>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
<td>70</td>
</tr>
<tr>
<th scope="row">8</th>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
<td>80</td>
</tr>
<tr>
<th scope="row">9</th>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
<td>90</td>
</tr>
<tr>
<th scope="row">10</th>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
</table>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.