2013-05-21 3 views
5

ここで何が起こっているのか説明できますか? http://jsfiddle.net/BeQmw/2空の表のセルにテキストを追加するとその幅が変更されます

2つのテーブルと2つのセルがあります。各セルには異なる背景色があり、幅を確認できます。 2つのテーブルの唯一の違いは、2番目のテーブルの最初のセルに+文字があることです。しかし、これが起こると、+を含むカラムの細胞がはるかに広くなります。

なぜHTMLがそのような理由がありますか?すべてのセルの幅が同じであることを指定する方法はありますか?

+0

幅のバランスを取るためには、各セルに等しい数の文字が必要です。それ以外の場合は、上部にスタイルブロックを追加することができます。を50%に保つことができます。 – prograhammer

答えて

3

間の比率を保つようになります。この設定により、ブラウザはセルの内容に基づいてテーブルセルのレイアウトを計算します(つまり、コンテンツのあるセルは、セルがないセルとは異なる影響を受けます)。私はそのアルゴリズムが何であるか正確には分かりませんが、<table>要素にwidth=100%を指定しないと、空白の表のセルに1または2ピクセルの幅があり、表の全幅が乗算されているように見えます。これは、最初の表のセルにコンテンツを追加するにつれて減少し続けますが、2番目の表の内容で増加します。

私は追いかけて、table-layout: fixedはセルの内容に依存せず、指定された幅<col>、枠線、およびセルの間隔に基づいて表のセルの幅を計算します。 (Specification)あなたはこの動作を確認することができます:http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

のスペックを約table-layout: autoと実際に話をするために行くことは言う:

UAが、このアルゴリズムを実装する必要はありません

...

テーブルセルの特定の幅は保証されません。

0

http://jsfiddle.net/BeQmw/4/あなたは2個の細胞を持っている場合、width:50%; を使用し、それは確かそれは<table>autoからtable-layoutセットを持って、デフォルトでは2つのセル

関連する問題