Некоторые гиперссылки в строке таблицы не работают (но выделены)

Question

Я позаимствовал некоторые стили, чтобы обеспечить вертикально прокручиваемую область на странице.В строке заголовка таблицы некоторые имена столбцов кликабельны и поэтому имеют теги href;Однако первая пара не работает.Один, в конце столбца, делает.Строка заголовка играет с полями, с целью частично разрешить центрирование текста.Возможно, ссылка как-то скрыта?

.fixed-table-container {
  width: 1350px;
  height: 450px;
  margin: 5px auto;
  background-color: white;
  /* above is decorative or flexible */
  position: relative;
  /* could be absolute or relative */
  padding-top: 40px;
  /* height of header */
}

.fixed-table-container-inner {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

.header-background {
  background-color: #D5ECFF;
  height: 40px;
  /* height of header */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.th-inner {
  position: absolute;
  top: 0;
  line-height: 40px;
  /* height of header */
  text-align: left;
  padding-left: 5px;
  margin-left: -5px;
}

.first .th-inner {
  border-left: none;
  padding-left: 6px;
}

.second .th-inner {
  border-left: none;
  padding-left: 6px;
}


/* extra-wrap */

.extrawrap th {
  text-align: center;
}

.extra-wrap {
  width: 100%;
}


/* for hidden header hack to calculate widths of dynamic content */

.hidden-head {
  min-width: 530px;
  /* enough width to show all header text, or bad things happen */
}

.hidden-header .th-inner {
  position: static;
  overflow-y: hidden;
  height: 0;
  white-space: nowrap;
  padding-right: 5px;
}

<div class="fixed-table-container">
  <div class="header-background"> </div>
  <div class="fixed-table-container-inner extrawrap">
    <table cellpadding="5" style="font-family:arial; font-size:12px; width:100%;">
      <thead>
        <tr>
          <th class="first">
            <div class="th-inner"><a href="z.pl?sort=0">A</a></div>
          </th>
          <th>
            <div class="th-inner"><a href="z.pl?sort=1">B</a></div>
          </th>
          <th>
            <div class="th-inner">C</div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">D</div>
            </div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">E</div>
            </div>
          </th>
          <th>
            <div class="th-inner">F</div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">G</div>
            </div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">H</div>
            </div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">I</div>
            </div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;">J</div>
            </div>
          </th>
          <th>
            <div style="margin:0 auto; width:0;">
              <div class="th-inner" style="width:100%; margin-left:-50%; text-align:center;"><a href="z.pl?sort=2">K</a></div>
            </div>
          </th>
        </tr>
      </thead>

Ссылка на столбец K работает, на столбцы A и B ссылки не работают;это означает, что они не «кликабельны».Я попытался переместить поля вокруг, но не повезло.

Два закрывающих указателя "/ div" и "/ table" находятся в конце таблицы, поскольку за этой строкой заголовка следует ряд строк данных..