HTMLレイアウトで、同じ列とtdパーセントの幅を持つ異なるテーブル

Question

HTMLページにテーブルをレイアウトする際に問題があります。私は1つのdivのコンテナの下にいくつかのテーブルを1つ持っている。すべてのテーブルの幅は常に100％です。すべてのテーブルにおいて、tdsは同じ列幅を有する。

Table 1 
Col 1: width 15%|Col 2: width 20%|Col 3: width 35%|Col 4: width 30% 

Table 2 
Col 1: width 15%|Col 2: width 20%|Col 3: width 35%|Col 4: width 30% 

...  
Table n 

私はMozillaのFirefoxやGoogle Chromeを使用している場合は、すべてがよさそうだが、私はIEまたはエッジを使用する場合、問題が発生したと私はサイズを変更する場合は悪化しています。

問題の内容を理解できません。私は、パーセンテージのために異なるテーブル間でカラムが常に等しいことを期待していました。

私はコード（それはそれは良いではない場合はそう言い訳してください、非常に古いと他の人からです。）からの抜粋作成：私は内容がセルの幅が広すぎることを認識

https://jsfiddle.net/uag2Ldur/#&togetherjs=3VaeO1f97c

をFirefoxのようにInternet Explorerで同じように見える/動作するようにするにはどうすればよいですか？

Answer 1

ブラウザごとに異なるサイズは、各ブラウザが異なるHTML要素に適用するデフォルトの余白とパディングの一部に起因する可能性があります。

Answer 2

こんにちは、あなたは、修正するために、これを使用することができ、それ

HTML：

<table style="width:100%"> 
    <tr> 
    <th colspan="2">input</th> 
    <th colspan="2">input</th> 
    <th colspan="2">Input</th> 
    </tr> 
</table> 

CSS：

th, td { 

} 

・ホープ、このことができます

Answer 3

はあなたが

table-layout:fixed; 

を設定しようとしています

あなたのテーブルのCSSには？

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

EDIT：あなたのフィドル途中で

[OK]を、私が最初に考え "crikey、私は長い時間のために、フォントタグを見ていません"。 :)

私の2番目の理由は、列の幅を指定することはできますが、HTMLテーブルは内容に関係なく対応することが最善です。

私は、これらの属性すべてではなくcssを使用してサンプルから更新されたフィドルを作成しました。そのため、よりクリーンで読みやすくなりました。 IEでのレイアウトを修正する主なものは、テーブルレイアウトです：以前に提案した固定。あなたがそれを取り出すと、IEとEdgeでテーブルの位置がずれることがあります。

https://jsfiddle.net/6um81q3b/1/

私はクロームやFirefox、IE11とエッジでこのサンプルをテストしてみました。