
他のページにも投稿したのですが、どうも質問した場所が違ってたよう
なので、もう一度ここで質問し直させてください。お願いします。
Firefoxを使ってるのですがズームするとTableの線(ボーダー)が消えてしまいます!
同じTableを3パターンのズーム度でアップしました。
http://i800.photobucket.com/albums/yy282/nothing …
左は問題無いのですが、真ん中と右はTableの線が一部消えてしまってます。
ちなみにここの質問一覧ページもズームすると枠線が消えたりします。
http://oshiete1.goo.ne.jp/205/c709.html
ちなみにIE8でも似たような現象がありました!
何が原因でしょうか?どうすれば改善するでしょうか?
アドバイスお願いします。
サンプルTableのHTMLとCSSを書いておきます。
☆HTML
<table>
<tr>
<td>たこ焼き</td>
</tr>
<tr>
<td>たこ焼き</td>
</tr>
<tr>
<td>たぬき</td>
</tr>
<tr>
<td>たぬき</td>
</tr>
<tr>
<td>ほうれん草・ピーマン</td>
</tr>
<tr>
<td>ほうれん草・ピーマン</td>
</tr>
</table>
・CSS
tr, td {border:1px solid black;}
table{text-align:center; border-collapse:collapse;}
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
フルページズームの際のブラウザ固有の不具合の様です。
tableのborderがズームイン/アウトの際に部分的に非表示になってしまう点に関しては、特にFirefox3とIE7が弱いみたいですね。Opera9.61では非表示にこそならないですが、時々太さが不揃いになる現象が見られました。確認した中ではSafari4が一番優秀の様で、非表示になる事も線の太さが不揃いになる事も起こりませんでした
検証してみましたところ、Firefox3では"border-collapse: separate;"にする事で非表示や太さの不揃いという不具合は回避できる様です。
ソースの様な”1行に1列”の表組みであれば、CSSを:
table {
border-collapse: separate;
border-spacing: 0;
border-bottom: 1px solid #000;
}
td {
border: 1px solid #000;
border-bottom: none;
text-align: center;
}
とする事で"border-collapse: collapse;"と同じ見え方にでき、且つズームイン/アウトの際のボーダー表示の不具合も回避できます。
※table {(省略)border-top: 1px solid #000;}とtd {(省略)border-top: none;}の組み合わせでも結果は同じ事になりますので、任意でどうぞ。
”1行に2列以上”の場合は、上下だけでなく隣合うセルの左右のボーダーも重複してしまうので、CSSは:
table {
border-collapse: separate;
border-spacing: 0;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
td {
border: 1px solid #000;
border-bottom: none;
border-left: none;
text-align: center;
}
とでもしておけば良いです。
※これも上記と同じ理屈で、table {(省略)border-right: 1px solid #000;}とtd {(省略)border-right: none;}の組み合わせでもかまいません。
ただし、IE7以下はborder-spacingが効かない為、"border-collapse: separate;"とする事でセルとセルの間に隙間ができてセルが切り離されて見えてしまい、"border-collapse: collapse;"の場合と同じ結果にはなりません。
IE7以下対策としてはNo.1様の様にコンディショナル・コメントを使う手もあるのですが、HTML側の<table>の記述に「cellspacing="0"」の属性を追加しておく事でも回避できます。
No.1
- 回答日時:
table {
text-align:center;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-spacing: 0px;
border-collapse: separate;
}
<!--[if IE]>
<style type="text/css">
table { text-align: center; border-collapse: collapse; }
</style>
<![endif]-->
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
td要素内のdiv要素をセンタリン...
-
センタリングしたページの印刷
-
ブラウザの文字サイズを変える...
-
Tableタグで作成した表の縮小
-
FLASHの上にテーブルを重ねるには
-
HTMLのテーブルでそれぞれの大...
-
trとtrの間
-
XHTMLに関する質問 順序が逆に...
-
同じwidth=200でもセル内の文字...
-
divで囲んだ文字が消える
-
[css]tableのtr、10行ごとに背...
-
IEでテーブル内のテキストが...
-
Dreamweaver デザインビューの...
-
<img>タグにCSSのclass設定可能?
-
表とリスト(ulとtable)の違い...
-
tableセル内の長い文章の後半を...
-
Tableタグ内のspan styleが適応...
-
テーブルが左右上下中央表示に...
-
テーブル(table)に角丸(radius)...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
Firefoxを使ってるのですがズー...
-
同じクラス名はつけないほうが...
-
テーブルの一部分のセルだけに...
-
divで囲んだ文字が消える
-
Tableタグ内のspan styleが適応...
-
<img>タグにCSSのclass設定可能?
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
td要素内のdiv要素をセンタリン...
-
Tableタグで作成した表の縮小
-
XHTMLに関する質問 順序が逆に...
-
trとtrの間
-
formのinputなどの幅100%指定
-
firefoxで「height: 100%;」と...
-
画像を並べて配置したい
-
表とリスト(ulとtable)の違い...
-
CSSで空けた文頭の全角スペース...
-
Visual Studio で CLR 開発でデ...
おすすめ情報