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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

2699閲覧

HTMLのテーブルタグに対して複数の疑似クラスの判定について

jun_

総合スコア33

CSS3

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/21 03:01

###前提・実現したいこと
htmlのtableタグで角丸を実現したいと思っています。
tableタグにborderをつけるとブラウザによって見えたり見えなかったりするので(これもよくわからないですが・・・)
td,thに対し、borderをつけています。
trタグに、style="display:none" を指定した場合、角丸の対象から除外したい。

###発生している問題・エラーメッセージ

###該当のソースコード

<table> <tbody> <tr> <th>角丸にしたいセル</th><td>角丸あたらない(NG)</td> </tr> <tr style="display:none;"> <th>非表示の行</th><td>角丸あたらない(OK)</td> </tr> </tbody> </table>

CSS (抜粋)
table>:last-child tr:not([style='none']):last-child>:first-child{
border-bottom-left-radius:5px;
}
table>
:last-child tr:not([style*='none']):last-child>*:last-child{
border-bottom-right-radius:5px;
}
###試したこと
notを外して、 display:noneの最終行に対し、cssが当たることを確認
last-childを外して display:none以外に対し、cssが当たることを確認

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

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

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

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

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

Lhankor_Mhy

2016/12/21 05:39

『last-childを外して display:none以外に対し、cssが当たることを確認』とありますが、これではダメなんですか?
jun_

2016/12/21 05:49

サンプルでは1行表示、1行非表示なんですが、2行表示、1行非表示だと、表示している2行ともに効いてしまうからNGです。
Lhankor_Mhy

2016/12/21 05:53

つまり、「表示されている行の内で最後の行の最初と最後のセル」に効かせたいということですか? スタイルの打ち消しをした方がすっきりしそうですが、そういう話ではないんですよね?
jun_

2016/12/21 07:21

勉強不足で申し訳ありません。スタイルの打ち消しとはどういうことでしょうか。セレクタだと難しいようであればjavascriptで、判定して直接styleを指定しようと思ってましたが、そういうことでしょうか?
LibertyBell3

2016/12/21 07:58

あぁ、こちらでスタイルの打ち消し、書かれていたのですね。追記したのはそういうことだと思います。
Lhankor_Mhy

2016/12/21 08:45

すみません、私の勘違いですね。これは難しい……
guest

回答3

0

質問文を理解できていないかもしれないですが、こういうことがしたいのですか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 table { 8 border-spacing: 0; 9 border: 1px solid #000; 10 border-radius: 6px 6px 6px 6px; 11 overflow: hidden; 12 } 13 14 td, th { 15 border-left: 1px solid #000; 16 border-top: 1px solid #000; 17 } 18 19 th { 20 background-color: mistyrose; 21 border-top: none; 22 } 23 24 td:first-child, th:first-child { 25 border-left: none; 26 } 27 </style> 28</head> 29<body> 30<table> 31 <tr> 32 <th>テキスト1</th> 33 <th>テキスト2</th> 34 </tr> 35 <tr> 36 <td>テキスト3</td> 37 <td>テキスト4</td> 38 </tr> 39 <tr style="display:none;"> 40 <td>テキスト5</td> 41 <td>テキスト6</td> 42 </tr> 43</table> 44</body> 45</html>

投稿2016/12/26 02:54

編集2016/12/26 03:00
s8_chu

総合スコア14731

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

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

0

四方が角丸で、最終行がdisplay="none"でも、最下部の角丸を維持したいということだと思います。

HTML

1<div id="box"> 2 <table cellpadding="0" cellspacing="0"> 3 <tr> 4 <th scope="col">タイトル1</th> 5 <th scope="col">タイトル2</th> 6 </tr> 7 <tr> 8 <td>内容</td> 9 <td>内容</td> 10 </tr> 11 <tr> 12 <td>内容</td> 13 <td>内容</td> 14 </tr> 15 <tr> 16 <td>内容</td> 17 <td>内容</td> 18 </tr> 19 <tr class="none"> 20 <td>内容</td> 21 <td>内容</td> 22 </tr> 23 </table> 24</div>

CSS

1#box table { 2 border-collapse:separate;/* ここがミソ */ 3 border:1px solid #000; 4 border-radius:5px; 5} 6#box th,#box td { 7 padding:10px; 8 font-size:14px; 9} 10#box th { 11 background-color:#efefef; 12 border-right:1px solid #ccc; 13} 14#box th:first-child { 15 border-radius:5px 0 0 0; 16} 17#box th:last-child { 18 border-radius:0 5px 0 0; 19 border-right:none; 20} 21#box td { 22 border-top:1px solid #ccc; 23 border-right:1px solid #ccc; 24} 25#box table tr td:last-child { 26 border-top:1px solid #ccc; 27 border-right:none; 28}

Firefox/Chrome/Operaで確認しましたが、いずれも実現できていると思います。
border-collapse:separate;はこちらを参考に
なぜか、thにはradius指定が必要だけど、最終行のtdには必要ないようです。

補足:最終行にradius指定が…ってtdのbottomにborder入れてないから角丸に
なっていなくても、気づかないだけですね(笑)。

追記:逆に攻めてみました

CSS

1.none { 2 display:none; 3} 4#box table tr td:first-child { 5 border-radius:0 0 0 5px; 6} 7#box table tr td:last-child { 8 border-radius:0 0 5px 0; 9} 10#box table tr:not(.none):not:last-child td:first-child, 11#box table tr:not(.none):not:last-child td:last-child { 12 border-radius:0; 13}

最初から、左端のtd左下に角丸、右端のtd右下に角丸を指定。
notで、最終行と.none以外を角丸無しにする。
スタイル直書きはクラスにしておきました。

投稿2016/12/21 06:06

編集2016/12/21 07:56
LibertyBell3

総合スコア1084

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

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

jun_

2016/12/21 07:07

ご丁寧にありがとうございます。 もともと、おっしゃられるのに似てるような書き方(tableの左と上、td,thの右と下に線を表示)をしてたのですが、TABLEタグ上の線がブラウザによって安定しなかったため(約2000画面中10画面程度CSSはあたっているけど線が出ない場合があり)、すべてのTD,THに対してCSSをあてるようにしました。 若干異なるため、完全にコピーすれば正常に動作するかもしれませんが、確認に時間がかかってしまうため、できれば、セレクタで指定できると助かります。 補足については、書いていて当然のことなのでここでは省略していました。 (見た目で出ているかもですが、CSSがあたっているかで確認しています) 記載しなかったため勘違いさせて申し訳ありません。
LibertyBell3

2016/12/21 07:46

どうやら出来たっぽいです。 追記をご覧ください。
LibertyBell3

2016/12/21 08:20

:not(.none)部分が無くても大丈夫そうです。
jun_

2016/12/21 08:52

すみません、今日は確認できないので明日行います。 クラスにしたら、:notと:last-childの両方に対応できるのであれば、それで解決です.
jun_

2016/12/26 01:35

やはりだめみたいですね。 意味合い的に last-childではなく、last-of-typeを使えば良いのか!!とちょっと気づいたのですが、なぜかlast-of-childを先に判定した後に、他のチェックをするような動きになっていました。 tr.disp:last-of-child {・・・}←trの中で最後のもののうち、クラスがdispのもの tr:last-of-child.disp {・・・}←この動きとなる(このように書いても当然同じ動き) このセレクタはきっと実現不可能なのでしょうね・・・
LibertyBell3

2016/12/26 05:26

わたくし、相当目がダメになっているみたいですね。 :not:last-childは、:not(:last-child)って書かないとだめでした。 それでも効かないんですけどね… s8_chuさんのoverflow:hidden;はきっちり効いていますが、 tableのborderが効いていないので、現状ではだめだと思います。 なので、その原因をつぶしてあげれば解決すると思います。 セレクタだけでは、どうにもならなそうです。
guest

0

table系のタグはブラウザごとの差異吸収が手間になるので、
table系要素の装飾は全てリセットして、
案1
divなどの装飾用要素を一つ挟んで、当該のtd>div , th>div に角丸を当てる
案2
tabaleの外側にラッパーになるdivタグを置き、そこに角丸を当てる

というのを私ならやっちゃいます。

本質的な解決ではないとは思うのですが、
可読性の低いCSSになってしまっていると感じてしまったので、どうしてもtable要素自身に当てたいということでなければシンプルになるかもしれません。

投稿2016/12/21 05:49

kensii

総合スコア191

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

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

jun_

2016/12/21 06:05

なるほどですね。 見にくいので、どうしたものかなとも思ってましたが、、、 ①実際は、ループしながらTRを作成しているため、divを置くのであれば、javascriptであててしまいますね。そもそも、cssよりそういう対応した方が楽なのかもしれません。 ②ためしに、ラッパーのDIVタグを置いてみたのですが、tableのcssがあたる
jun_

2016/12/21 06:08

途中で送信されてしまいました^^; ②ためしに、ラッパーのDIVタグを置いてみたのですが、tableの背景を設定しているせいか、角丸部分が負けてしまいました。私のやり方が悪いのかもしれません。
kensii

2016/12/21 06:14

予想で書いちゃってますが、ラッパーのdivにoverflow:hiddenをするとどうなります?
jun_

2016/12/21 07:15

内側の要素は、外側にきれいに収まろうとしないみたいで、td,thの線にはradiusが働かないようでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問