テーブルの幅

今Macでテーブルを作っていて、Windowsでも見てみたらWindowsの方がズレていました。
各ブラウザごとに微妙に幅が違うのはなぜでしょうか？
ネットでいろいろ調べましたが、font-sizeの調整ぐらいしか書いておらず調整しても結構ズレます。
上手くMac,Windowsで幅を奇麗にする方法はないでしょうか？

よろしくお願いします。

行動規範の内容に同意します

回答2件

各ブラウザごとに微妙に幅が違うのはなぜでしょうか？

ブラウザはHTMLを解釈して表示する際にレンダリングエンジンというものを使っています。
このレンダリングエンジンにはいくつか種類があり、それぞれ結果が異なります。
ブラウザによって使われているレンダリングエンジンが違うので、見え方が変わってしまうのです。

上手くMac,Windowsで幅を奇麗にする方法はないでしょうか？

幅を揃えるにはwidthという幅を指定するスタイルを当ててあげる事で可能です。

試しに以下のコードで表示確認をしてみてください。

lang
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5	<meta charset="UTF-8">
6	<style>
7		table{
8			width: 200px;
9		}
10		th,td{
11			width: 100px;
12			border: 1px solid;
13		}
14	</style>
15</head>
16<body>
17
18	<table>
19		<tr><th>ほげ</th><th>ふが</th></tr>
20		<tr><td>ほげほげ</td><td>ふがふが</td></tr>
21	</table>
22
23</body>
24</html>

見た目をいじる方法をもっと知りたい場合はCSSを勉強されると良いと思います。

投稿2014/11/28 13:14

SAMURAI-HACK

総合スコア988

morinokuma

2014/12/04 03:49

返信ありがとうございました。参考になり、cssをもっと勉強します。

行動規範の内容に同意します

ベストアンサー

複数存在するブラウザは、それぞれ異なるレンダリングエンジンを採用しているために同じフォントサイズを指定していても同じ大きさでは表示されていません。
付け加えて、<table>に係るcssの表現も同じ指定をしていても一律ではありません。（デフォルトでIEではthの内容はセンタリングで表示するが、firefoxなどでは左詰めで表示される。）

上記の点から、ある程度マルチブラウザで同じような表示をさせるためには、大枠のtableのwidthには100%を指定し、各th,tdにもwidthをpx単位で指定して、どのブラウザでも同じような表示にする。
もしくは、cssハックを用いてブラウザごとに横幅指定するしか無いと思います。

投稿2014/12/03 18:11