![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
box-shadowがFirefoxだと内枠にも付いてしまいます(バージョン20)。
内枠には付けたくないのですが、どうすればよろしいでしょうか?
添付画像のようになってしまいます。
IE10だと内枠には付きません。
このような形にしたいです。
コードを下記します。
<table>
<tr><th>ID</th><th>名前</th><th>得点</th></tr>
<tr><td>1</td><td>ほげ男</td><td>100</td></tr>
<tr><td>2</td><td>ほげ子</td><td>11</td></tr>
</table>
<style type="text/css">
table{
border-spacing:0;
font-family:"メイリオ";
}
table th{
padding:8px 0;
border-top:1px solid #aaa;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
text-shadow:0 -1px 0 rgba(255,255,255,0.9);
box-shadow:-1px 0 1px rgba(255,255,255,1)inset,0 -1px 1px rgba(255,255,255,0.5)inset;
background:#eee;
background:linear-gradient(#eee,#ddd 50%);
width:134px;
}
table th:first-child{
border-radius:5px 0 0 0;
}
table th:last-child{
border-radius:0 5px 0 0;
border-right:1px solid #aaa;
box-shadow:2px 2px 1px rgba(0,0,0,0.1),0 -1px 1px rgba(255,255,255,0.5)inset,-1px 0 1px rgba(255,255,255,1)inset;
}
table td{
padding:8px 0;
text-align:center;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
table td:last-child{
border-right:1px solid #aaa;
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr{
background:#fff;
}
table tr:last-child td{
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr:last-child td:first-child{
border-radius:0 0 0 5px;
}
table tr:last-child td:last-child{
border-radius:0 0 5px 0;
}
</style>
![「box-shadowでFirefoxだと」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/b/1099822_5497c3695f0b4/M.jpg)
No.2ベストアンサー
- 回答日時:
問題のある個所を1つずつ検証されてはいかがでしょうか?
【例】
table th:last-child{
border-radius:0 5px 0 0;
border-right:1px solid #aaa;
box-shadow:2px 0/*★2pxっておかしくない?*/ 1px rgba(0,0,0,0.1),0 -1px 1px rgba(255,255,255,0.5)inset,-1px 0 1px rgba(255,255,255,1)inset;
}
私なら、
table{
margin-bottom:2em;
border-spacing:0;
font-family:"メイリオ";
border-radius:5px;
box-shadow:2px 2px 1px rgba(0,0,0,0.1)}
などとしておいて、tdやthの影の負担を減らします。少なくともtdへのシャドウは不要になります。
No.1
- 回答日時:
質問者です。
質問時の添付画像が粗いので、以下にアップし直しました。
http://uploda.cc/img/img51834c2049ead.jpg
参考URL:http://uploda.cc/img/img51834c2049ead.jpg
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでこの画像を表示したいで...
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
HTMLの CSSのファイルというの...
-
スマホ(android)のタッチパネ...
-
HTMLを正しく表示させるには
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
英字と日本語が並んだhtmlの自...
-
スマホでHTMLファイルを開いて...
-
HTMLで特定の文字だけ色を変え...
-
iPhoneで HTMLファイルを閲覧
-
サイトにコンテンツを並べる際...
-
webデザインの勉強で、HTML/CSS...
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
レスポンシブWeb 右側の表示が...
-
縦ボーダーの長さ変更方法
-
テキストボックスが選択できない
-
フォント12pxの200%?
-
Google Chrome用CSSハックについて
-
ホームページ作成後、別のブラ...
-
[CSS]エラーの原因
-
box-shadowでFirefoxだと内枠に...
-
Firefoxのhtmlとcss...
-
レスポンシブのサイトの根本的...
-
Wordpress Stinger5の記事部分...
-
PHP内で同じようにCSSを表示さ...
-
HTMLにsvg画像表示したら小さか...
-
FC2ブログでウィンドウが小...
-
L字みたいな記号の表示
-
PDFファイルが破損していると表...
-
シーサーブログのヘッダー画像...
-
ピクチャーボックスの大きさに...
おすすめ情報