tableのカラム幅可変では、th/td 内にdiv設置の上で、cssの resize: horizontal;

以下の通りです。

chromeやedgeでは、thやtdに「resize: horizontal」を指定することで、カラム幅を可変にできますが、 firefoxの場合、th/td 内にdivを設置した上で、指定要です。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* ヘッダ部の表示位置固定 */
    th     { position: sticky;
             top: 0;
             background-color: #e0ffff; }
    /* カラム幅可変 */
    th div { resize: horizontal;
             overflow: hidden;          }
    
    table  { border-collapse: collapse; }
    th, td { border: 1px solid #555;
             padding: 5px;              }
  </style>
</head>
<body>
  <div>&lt;table&gt; ヘッダ部の位置固定と、カラム幅可変TEST</div>
  
  <table>
    <thead>
      <tr>
        <th><div>No</div></th>
        <th><div>見出A</div></th>
        <th>見出B</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  
  <template id="tmpl_tr">
    <tr>
      <td></td><td></td><td></td>
    </tr>
  </template>
  
  <script>
    // TBODY内に行を追加
    let tmpl_tr = document.querySelector("#tmpl_tr");
    let tbody   = document.querySelector("table tbody");

    let i = 0;
    for (let i=1; i<100; i++){
        let clone = tmpl_tr.content.cloneNode(true); //"true" is "deep copy".

        let tds = clone.querySelectorAll("td");
        tds[0].textContent = i;
        tds[1].textContent = "値A";
        tds[2].innerHTML   = "<a href='#'>dummy</a>";
        
        tbody.appendChild(clone);
    }
  </script>
</body>
</html>

end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ