html - 浮き出し効果のある HTML テーブル

Question

列を持ち上げる必要がある HTML テーブルには、少し問題があります。添付の画像を見れば、私の言いたいことがわかるでしょう。 これらの隆起した柱の目的は、ユーザーの注意を引くことです。

問題は：

1. 列を他の列の上に持ち上げる効果を得るには、何らかの要素/高さ/マージンがテーブルの境界の外側に表示される必要がありますが、これは機能していないようです
2. 底も同じです
3. ドロップ シャドウを正しく表示するには、列内のすべてのセルに適用する必要があります。

これを複数のテーブルに分割し、隆起した列にする必要があるテーブルにスタイルを適用することで、これを機能させました。添付した画像は、実際にはこのように機能するライブ テーブルです。ただし、テーブルの他の必要な機能がすべて失われます...

1. 表 1 ではテキストが折り返されているが、表 2 では折り返されていない場合、行の高さが一致しません。
2. 行の高さの問題に対処するために、各テーブルの行に固定の高さを適用しましたが、テキストが折り返されないようにする必要があります。幅よりも長いテキストを取得すると、問題が発生します。

テーブルを分割せずにこれを達成する方法を知っている人はいますか?

ありがとう、ジャック

Answer 1

th上部にオーバーバーを表示するために、ヘッダー行の上に表の行を追加してみてください (タグの使用を停止する必要がある場合があります)。同様に、下にも追加のハイライト行があります。

そのためにはテーブルを少し妥協する必要がありますが、テーブル タグのすべての目的を無効にするため、2 つのテーブルに分割するよりも私の本では優れています。テーブルを表示し、そのテーブルを簡単に宣言します。

強調表示された列の選択が完全に静的でない限り、テーブル内の効果はおそらく jquery で行うのが最適です。その場合、html を適切に生成して静的な html バージョンをレンダリングすることを検討してください。