I have created a table with vertical test in the head, but i fail to make the cells to be clickable.
The table is used to document file formats that are used in our system. As I have implement it now, it is possible to click on the text link to go to the documentation. But, how do I do so that it is able to click anywhere in a cells. To be even clearer, I want the background color of the cell to change when you move the mouse over it.
.header {
width: 100%;
background-color: White;
overflow-x: auto;
_overflow: auto;
}
table.form a {
color: black;
width: 100%;
height: 100%;
display: inline-block;
text-decoration: none;
}
table.form a:hover {
color: SteelBlue;
}
table.form {
background-color: white;
border-collapse: collapse;
}
table.form th,
table.form td {
border: 1px solid black;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-weight: normal;
min-width: 9px;
}
table.form td {
width: 9px;
text-align: center;
}
th:not(.rotate) {
text-align: left;
}
th.rotate {
vertical-align: top;
text-align: center;
}
th.rotate > div {
vertical-align: top;
display: inline-block;
}
th.rotate > div >span {
-ms-writing-mode: tb-rl;
/* old syntax. IE */
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* new syntax */
white-space: nowrap;
vertical-align: top;
}<div class="header">
<table class="form">
<thead>
<tr>
<th colspan=10>Short reference</th>
<th colspan=20>External Identity</th>
<th colspan=2 rowspan=2 class="rotate">
<div><span>Cathegory</span>
</div>
</th>
<th colspan=17>Connection</th>
<th colspan=2 rowspan=2 class="rotate">
<div><span>Filter time</span>
</div>
</th>
<th rowspan=2 class="rotate">
<div><span>Indication type</span>
</div>
</th>
<th rowspan=2 class="rotate">
<div><span>C=Command</span>
</div>
</th>
<th rowspan=2 class="rotate">
<div><span>L=Overload check</span>
</div>
</th>
<th colspan=2 rowspan=2 class="rotate">
<div><span>Overload max</span>
</div>
</th>
<th colspan=22 rowspan=2> </th>
<th rowspan=2 class="rotate">
<div><span>Equipped spare = 1</span>
</div>
</th>
<th rowspan=2 class="rotate">
<div><span>Non-equip. spar=1</span>
</div>
</th>
</tr>
<tr>
<th colspan=3 class="rotate">
<div><span><a href="#formtype">Form type</a></span>
</div>
</th>
<th colspan=2 class="rotate">
<div><span><a href="#sheet">Sheet</a></span>
</div>
</th>
<th colspan=2 class="rotate">
<div><span><a href="#line">Line</a></span>
</div>
</th>
<th colspan=3 class="rotate">
<div><span><a href="#terminalno">Terminal no</a></span>
</div>
</th>
<th colspan=6>
<div><span><a href="#system">System</a></span>
</div>
</th>
<th colspan=14>
<div><span><a href="#pointcode">Point code</a></span>
</div>
</th>
<th colspan=3 class="rotate">
<div>
<span>Type of input</span>
</div>
</th>
<th colspan=2 class="rotate">
<div>
<span>Bus address (hex)</span>
</div>
</th>
<th colspan=2 class="rotate">
<div>
<span>Channel no</span>
</div>
</th>
<th colspan=10>Type of Board</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>32</th>
<th>33</th>
<th>34</th>
<th>35</th>
<th>36</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>41</th>
<th>42</th>
<th>43</th>
<th>44</th>
<th>45</th>
<th>46</th>
<th>47</th>
<th>48</th>
<th>49</th>
<th>50</th>
<th>51</th>
<th>52</th>
<th>53</th>
<th>54</th>
<th>55</th>
<th>56</th>
<th>57</th>
<th>58</th>
<th>59</th>
<th>60</th>
<th>61</th>
<th>62</th>
<th>63</th>
<th>64</th>
<th>65</th>
<th>66</th>
<th>67</th>
<th>68</th>
<th>69</th>
<th>70</th>
<th>71</th>
<th>72</th>
<th>73</th>
<th>74</th>
<th>75</th>
<th>76</th>
<th>77</th>
<th>78</th>
<th>79</th>
<th>80</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>Q</td>
<td>I</td>
<td> </td>
<td> </td>
<td>0</td>
<td>1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<h3 id="formType">Form type</h3>
<p>
Documentation for Form type
</p>
<h3 id="sheet">Sheet</h3>
<p>
Documentation for Sheet
</p>
<h3 id="line">Line</h3>
<p>
Documentation for Line
</p>
<h3 id="terminalno">Terminal no</h3>
<p>
Documentation for Terminal no
</p>
<h3 id="line">Line</h3>
<p>
Documentation for Line
</p>
<h3 id="system">System</h3>
<p>
Documentation for System
</p>
<h3 id="pointcode">Point code</h3>
<p>
Documentation for Point code
</p>
