質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3346閲覧

テーブルのヘッダーにグラデーションをかけたい

beat2280

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/22 14:32

テーブルのヘッダーthタグにグラデーションをかけたいです。
background: linear-gradient(to bottom, #45c0f6, #FFF);
で上から下まで一律でグラデーションをかける方法はありますでしょうか?

html

1 2 3<table> 4 <tr> 5 <th>タイトル1</th> 6 <td>内容</td> 7 </tr> 8 <tr> 9 <th>タイトル2</th> 10 <td>内容</td> 11 </tr> 12 <tr> 13 <th>タイトル3</th> 14 <td>内容</td> 15 </tr> 16</table> 17`

このようなときにタイトル1から3まで連続してグラデーションをかけたいのですが、
上記CSSだとthごとにグラデーションがかかってしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

tableにかけちゃえば良いのでは?
で、tdに本来の背景色を指定して隠す。

投稿2020/01/22 14:56

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

td を透過させたかったり複数の列に対応したいときは col 要素が使えるかもしれません。

CSS

1col:first-child { 2 background: linear-gradient(to bottom, #45c0f6, #fff); 3}

https://developer.mozilla.org/ja/docs/Web/HTML/Element/col

投稿2020/01/23 08:07

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

下記でどうでしょう。

css

1tr:first-child th{ 2 position: relative; 3} 4tr:first-child th::before { 5 position: absolute; 6 content: ""; 7 top: 0; 8 left: 0; 9 width: 100%; 10 height: 300%; 11 background: linear-gradient(to bottom, #45c0f6, #FFF); 12 z-index: -1; 13}

動作確認用サンプル

ただし、改行が入ったりして各行の高さが異なるとうまくいかないですが。
その場合はJavascriptが必要になりそうです。

追記

難しく考えすぎてました。LibertyBell3さんの回答でいいですよね。

動作確認用サンプル

さらに追記

x_xさん、
colgroup col というのもありましたね。
勉強になりました。

動作確認用サンプル

投稿2020/01/22 15:04

編集2020/01/23 13:11
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問