Is there any way to lock the header row when no <th> tags are used?

18 Views Asked by At

We use a CMS writing platform to develop documentation and then export it to HTML using an add-on exporter from a 3rd company.

The exported HTML does not use <th> tags on table header cells. Instead, it uses a class applied to a <td> tag. For example, at the top of our Glossary page, there is an alpha header row. Each letter is linked to the corresponding section of the glossary. We want the alpha header row to be sticky so that users can easily click a different letter to jump to another section.

Below is a snippet of the HTML <thead> section that is produced using the HTML exporter. Is there any way to make this header row sticky using CSS without having to rewrite the HTML?

We already tried using position: sticky;on the <thead> tag with no luck. Also tried adding position: sticky; to the class on the <td> tag, but as expected, no luck there either.

Thank you.

<thead class=" ">   
            <tr>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_safe-id-R2xvc3NhcnktIw">#</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-a">A</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-b">B</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-c">C</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-d">D</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-e">E</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-f">F</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-g">G</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                <p><a   href="#src-141561799_Glossary-h">H</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-i">I</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-j">J</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-k">K</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-l">L</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-m">M</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-n">N</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-o">O</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-p">P</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-q">Q</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-r">R</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-s">S</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-t">T</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-u">U</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-v">V</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-w">W</a></p>
                </td>
                <td  class="confluenceTh" rowspan="1" colspan="1">
                    <p><a   href="#src-141561799_Glossary-xyz">XYZ</a></p>
                </td>
            </tr>
        </thead>
0

There are 0 best solutions below