2012-03-22 6 views
1

私はCSSを使用していますが、簡単なテストのために私はインラインスタイルを使用しています。HTMLテーブルのセルの幅と高さを指定できないのはなぜですか?

echo "<td style='height=10px; width=10px;'>"; 

それは、セルの最大幅はしかし、高さはそれほどテキストでオーバーフローし、それが非常に大きい(高い)を取得、10pxのあることを確認する:これは私が実装しようとしているコードです。

私が達成しようとしているのは、そのセル内にある30文字以上の情報で、私はあなたがそれを見ることができないように隠したいという情報です。

(私は30個の文字を知っている10pxのより多くのですが、私はちょうどそれが働いたかどうかを確認するためにプレイしています!)

答えて

7

あなたの構文が間違っている:

悪い

echo "<td style='height=10px; width=10px;'>"; 
グッド

echo "<td style='height:10px; width:10px;'>"; 

ただし、これで問題は解決されません。私がspecを読んでいるところでは、固定レイアウトテーブルだけが、オーバーフロー時にコンテンツをクリップすることができます(対応するためのサイズ変更と比べて)。

より簡単で便利な方法は、DIVです。

は、この例を参照してください:あなたのデータは表形式であり、あなたがテーブルを使用する必要がある場合http://jsfiddle.net/Aa4JL/

しかし、あなたはDIVでセルの内容をラップすることにより、同じ効果を得ることができます。あなたは高さに基づいてクリッピングを気にしない場合は、text-overflow: ellipsisと組み合わせるwhite-space: nowrapと組み合わせた固定レイアウトテーブルを使用して素敵な楕円効果を達成できること

<table> 
    <tr> 
    <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>   
    </tr> 
</table>​ 

は注意してください。これは、DIVでコンテンツをラップする必要はありません。省略記号の効果は、新しいブラウザでのみ機能することに注意してください(古いブラウザではコンテンツは切り取られます)。

<table style="table-layout:fixed;width:50px;"> 
    <tr> 
    <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>   
    </tr> 
</table> 

このバイオリンは私が今説明したすべての技術を持っている:http://jsfiddle.net/Aa4JL/4/

+0

美しい...ありがとうございました! – Phil

1

私はあなたがそれを行うカントと思います。.. HTMLのみの細胞がどうなるかのサイズを意味し、細胞の基本サイズを定義あなたはテキストがありません。あなたのテキストがそれより大きければそれはそれを止めません。

あなたがやろうとしていることをするより良い方法は、PHPとsubstring()関数を使うことです。

ことができますなら、私に知らせたり次のような

echo "<td style=\"height:10px; width:10px;\">"; 
+0

ああ。ありがとう、私はそのサイズを制限するためにPHPを使用します..ありがとう..それは私たちが傾けることは迷惑な! – Phil

0
<style type="text/css"> 
td { 
    overflow-x: hidden; 

} 
</style> 
1

あなたの場合は動作しているようですが、HTML属性も二重引用符で定義されるべきもの

3

テキストオーバーフローを使用できます。 Thistext-overflow:ellipsisを使用した例です。私はjsfiddleの例を、上記の例からコードをコピーするだけで作成しました。

+0

良い例... :) – Baba

関連する問題