垂直桌头和可点击的单元格

Question

我在头部创建了一个垂直测试的表，但是我无法使单元格可点击。

该表用于记录我们系统中使用的文件格式。正如我现在实现的那样，可以单击文本链接转到文档。但是，我该怎么做才能点击单元格中的任何位置。为了更清楚，我希望当你将鼠标移到它上面时，单元格的背景颜色会发生变化。

.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>&nbsp;</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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>0</td>
        <td>1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>

Answer 1

解决方案：删除th中的所有额外内容，并确保其中只有锚标记作为其子标记。现在拉伸锚标记以占据th的完整空间，这样点击th上的任意位置实际上意味着点击a标记，该标记按预期工作。

使用CSS

table.form th:hover { 
  background-color: yellow;
  cursor: pointer;
}
th.rotate > a {
  writing-mode: vertical-rl;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align:left;
}

要仅更改其中包含链接的th的颜色，请将选择器更改为

table.form th > a:hover { 

HTML已更改为

 <th colspan=3 class="rotate">
    <a href="#formtype">Form type</a>
 </th>

这

 <th colspan=3 class="rotate">
   <div><span><a href="#formtype">Form type</a></span>
   </div>
  </th>

另请注意，href中有一个小错字，应该是formType而不是formtype。

.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;
}
table.form th:hover {
  background-color: yellow;
  cursor: pointer;
}
th.rotate > a {
  writing-mode: vertical-rl;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align:left;
}

<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>&nbsp;</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">          
           <a href="#formType">Form type</a>      
        </th>
        <th colspan=2 class="rotate">
          <a href="#sheet">Sheet</a>      
        </th>
        <th colspan=2 class="rotate">
          <a href="#line">Line</a>          
        </th>
        <th colspan=3 class="rotate">
          <a href="#terminalno">Terminal no</a>
        </th>
        <th colspan=6>
          <a href="#system">System</a>          
        </th>
        <th colspan=14>
          <a href="#pointcode">Point code</a>
        </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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>0</td>
        <td>1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>