スクリーンショットに示すようなテーブルを作成する必要があります:
得られた結果:
問題: 「登録済み」列のスクリーンショットのような緑色の枠線を作成できません。
Q: テーブルの場合、この境界線はどのように作成すればよいですか?
div に書き換えてみましたが、何も機能しませんでした
私のコード
スタイル設定のためにテーブル構造を削除する方が簡単であるという @finitelooper の指摘は理解できますが、それを削除するセマンティクスには満足していません。
結局のところ、データは表形式です。
このスニペットは別のアプローチを提供します。つまり、関連する td セルと th セルの疑似要素の前に緑色の境界線を配置します。
これらの曲線は、最初と最後の TD に関連する上下の境界線を設定することによって実現されます。
実際のサイズがどれだけ増加するか (10px) に関しては、コードをいくらか調整する必要がありますが、これは単なるデモンストレーションです:
ここでテーブルを使用するのはおそらく間違ったアプローチであり、状況が少し複雑になります。テーブル データはありますが、実際にはテーブルではないもの (この境界線など) も表示する必要があります。テーブルを使えばできますが、角を丸くするなどは難しいでしょう。
提案が 2 つあります。 1 つは、コードを同じに保ちながら、透明で枠線のある大きな div を作成し、テーブルの上に移動できるようにすることです。そうすれば、クリックできますが、見た目はきれいになります。## を使用することもできます。 #position:absolute を使用して、希望する場所に配置します。
を使用して、希望する場所に配置します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
スタイル設定のためにテーブル構造を削除する方が簡単であるという @finitelooper の指摘は理解できますが、それを削除するセマンティクスには満足していません。
結局のところ、データは表形式です。
このスニペットは別のアプローチを提供します。つまり、関連する td セルと th セルの疑似要素の前に緑色の境界線を配置します。
これらの曲線は、最初と最後の TD に関連する上下の境界線を設定することによって実現されます。
実際のサイズがどれだけ増加するか (10px) に関しては、コードをいくらか調整する必要がありますが、これは単なるデモンストレーションです:
ここでテーブルを使用するのはおそらく間違ったアプローチであり、状況が少し複雑になります。テーブル データはありますが、実際にはテーブルではないもの (この境界線など) も表示する必要があります。テーブルを使えばできますが、角を丸くするなどは難しいでしょう。
提案が 2 つあります。 1 つは、コードを同じに保ちながら、透明で枠線のある大きな div を作成し、テーブルの上に移動できるようにすることです。そうすれば、クリックできますが、見た目はきれいになります。## を使用することもできます。 #position:absolute
を使用して、希望する場所に配置します。