奇妙なHTMLテーブルエラー

HTMLでテーブルを使用してビンゴカードを作成しました。 2番目の列では、Iという文字を使用すると、列のサイズが自動的に縮小され、他の文字を使用すると、列のサイズが正常に戻ります。なぜそれが起こっているのですか？奇妙なHTMLテーブルエラー

（2列目でIを使用して）表の画像：（2列目でAを使用して）http://imageshack.us/photo/my-images/21/18575712.png/

表イメージ：http://imageshack.us/photo/my-images/580/11014314.png/

<html> 
<head> 
    <title>Bingo Card</title> 
</head> 

<body> 
    <h2>Bingo Card</h2> 
    <table border="1px" width="50%"> 
     <tr> 
      <th>B</th> 
      <th>A</th> 
      <th>N</th> 
      <th>G</th> 
      <th>O</th> 
     </tr> 

     <tr> 
      <td id="square0">&nbsp;</td> 
      <td id="square1">&nbsp;</td> 
      <td id="square2">&nbsp;</td> 
      <td id="square3">&nbsp;</td> 
      <td id="square4">&nbsp;</td> 
     </tr> 

     <tr> 
      <td id="square5">&nbsp;</td> 
      <td id="square6">&nbsp;</td> 
      <td id="square7">&nbsp;</td> 
      <td id="square8">&nbsp;</td> 
      <td id="square9">&nbsp;</td> 
     </tr> 

     <tr> 
      <td id="square10">&nbsp;</td> 
      <td id="square11">&nbsp;</td> 
      <td id="square12">&nbsp;</td> 
      <td id="square13">&nbsp;</td> 
      <td id="square14">&nbsp;</td> 
     </tr> 

     <tr> 
      <td id="square15">&nbsp;</td> 
      <td id="square16">&nbsp;</td> 
      <td id="square17">&nbsp;</td> 
      <td id="square18">&nbsp;</td> 
      <td id="square19">&nbsp;</td> 
     </tr> 

     <tr> 
      <td id="square20">&nbsp;</td> 
      <td id="square21">&nbsp;</td> 
      <td id="square22">&nbsp;</td> 
      <td id="square23">&nbsp;</td> 
      <td id="square24">&nbsp;</td> 
     </tr> 
    </table> 
</body> 
</html>

出典

2012-02-18 sandbox

FirefoxとChromeで確認しました。 – sandbox

あなたはそれを解決したいのですか正確な理由を欲しいですか – Prabhavith

@Prabhavith両方 – sandbox

は、列2はAが含まれている場合、私はChromeで同じ問題を参照してください。あなたが保証され、列の幅を持っているしたい場合は、明示的<colgroup>タグまたは対応するwidth属性のいずれかを使用して、そのサイズを定義する必要があります

<table border="1px" width="50%"> 
    <colgroup> 
    <col width="20%"></col> 
    <col width="20%"></col> 
    <col width="20%"></col> 
    <col width="20%"></col> 
    <col width="20%"></col> 
</colgroup> 
...

または

<tr> 
    <th style="width:20%">B</th> 
    ...

場合、ブラウザだけで任意の保証を行いません。明示的に異なる列の幅を定義するわけではありません。

UPDATE：HTML4 specificationから：

著者は、列には幅の情報を指定しない場合、それは全体のためにを待たなければならないため、ユーザエージェントは、インクリメンタルテーブルをフォーマットすることができないかもしれません適切な幅のを割り当てるために到着するデータの列。

出典

2012-02-18 13:28:43 home

あなたはCSSで列幅を変更しようとすることができ...

そして、私はそれが原因で文字「I」の他の文字に比べて「薄い」であると起こっていると思うが、私はわかりませんこれは、この単純では

出典

2012-02-18 13:32:10 matan7890

ほとんどの閲覧状況では、列の幅を同じ（20％）に設定するだけで十分です。しかし、一般に、HTMLとCSSの表のセルと列の幅の設定は単なる提案に過ぎず、コンテンツの要件に基づいてブラウザによって上書きされる可能性があります。（ここでは、非常に狭いブラウザウィンドウの幅を使用している場合、これを見ることができます）。

これを防ぐ方法は、「固定」テーブルレイアウトを使用することです。

<style> 
table { table-layout: fixed; } 
th { width: 20%; } 
</style>

"固定"レイアウトにはその意味があります。たとえば、コンテンツが収まらない場合、コンテンツは切り詰められます。

出典

2012-02-18 13:32:26 Prabhavith

を解決取得する必要があります：私は、各文字が私の幅は、使用を解決し得るために、A未満のCSSスタイル TD {20％の幅を}いくつかのスペースを取ると思う...

出典

2012-02-18 14:10:22

奇妙なHTMLテーブルエラー

答えて

関連する問題