在行与行之间使用多个标题编码HTML表的最佳方法是什么？我已经创建了一个像样的HTML表格.然而，当我try 使用屏幕阅读器来实现508合规性时，当我浏览每一行时，屏幕阅读器会读取所有行标题(标题1、标题2、标题3).有办法避免吗？我错过了什么？
这是小提琴:
https://jsfiddle.net/kq739m28/
<p>Test</p>
<div style=" overflow-x: auto;">
<table style=" width: 100%;">
<thead>
<tr>
<td> </td>
<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>
</tr>
</thead>
<tbody>
<tr>
<th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header1</th>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">dffddf</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td> </td>
<td> </td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">fdfdfdf</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">dffddf</th>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td>✓</td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
</tr>
<tr>
<th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header2</th>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">5455445</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td align="center" style=" text-align: center; color: black;"> </td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">fdfggfgf</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header3</th>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">fgggf</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td> </td>
<td>✓</td>
</tr>
<tr>
<th style=" font-weight: 400; text-align: left;">fgggfgf</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td> </td>
<td> </td>
<td>✓</td>
<td> </td>
</tr>
</table>
</div>