我在头部创建了一个垂直测试的表，但是我无法使单元格可点击。
该表用于记录我们系统中使用的文件格式。正如我现在实现的那样，可以单击文本链接转到文档。但是，我该怎么做才能点击单元格中的任何位置。为了更清楚，我希望当你将鼠标移到它上面时，单元格的背景颜色会发生变化。
.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>
答案 0 :(得分：0)
解决方案：删除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> </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> </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>