と国境を変換私はJavascriptがヘッダ
onScroll={() => {
document.querySelector('thead').style.transform =
`translate(0,${this.scrollRef.scrollTop}px)`;
}}
を通じて、テーブルヘッダをロックしますが、私はテーブルをスクロールすると、ヘッダーの境界線は、ヘッダに固執しないでください。
スクロールするときに境界線をヘッダーに残すにはどうすればよいですか？
これはあなたの問題を解決します：
thead th {
position:relative;
}
thead th:before {
content: '';
position: absolute;
height: calc(100% + 2px);
width: calc(100% + 2px);
border: 1px solid black;
top: -1px;
left: -1px;
pointer-events: none;
}
をそして、いや、JavaScriptが国境を変換されていません。問題は、境界線が実際には<th>要素の一部ではなく、折りたたまれていることです。
内部的に、ブラウザは隣接する要素をチェックして結合された罫線を決定します。これらの境界線は、が<th>要素に適用されますが、の最初のの位置には適用されません。
もっとも簡単な解決方法は、境界線を描画するために擬似要素:beforeを使用することです。
他のソリューションは、bootstrap.cssによって適用され、あなたの<table>上
border-collapse: collapse;
を上書きすることであろう。
しかし、これはあなたのテーブルの境界線がもはや崩壊（結合）されず、おそらくあなたが望んでいないことを意味します。
@meagar、ほとんどの 'react'と' angular'質問は[so]の質問自体の中に[mcve]を含んでいません。これとは異なり、ほとんどの場合、サンプルへのリンクはまったく含まれていません。彼らはすべてオフトピックとして閉じられるべきですか？私は個人的には明確な問題の声明を持っているので、同様の問題を抱えている将来の訪問者には有益であると考えられます。 –
@AndreiGheorghiuはい、そうすべきです。ここでの質問は、Github reposやその他のオフサイトリソースへのリンクに依存することはできません。設定したテストサイトにユーザーを誘導せずに質問をすることができない場合は、「スタックオーバーフロー」のトピックになります。 「解答可能」はオントピックの私たちの基準ではありません。 – meagar
オフサイトの参照を削除する編集済みの質問 – Avery235