CSS/tek satır html tablo satırı zorlamak için Javascript

SORU

8 Ocak 2009, PERŞEMBE

CSS/tek satır html tablo satırı zorlamak için Javascript

Şuna benzer bir HTML tablo var:

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

Ama taşma saklanmak istiyorum. Neden burada metni daha fazla bilgi için bir bağlantı içeren, "" çok fazla alan atıkların benim düzeni. sarma olması Bu (ekran kapalı yatay kaydırma çubuğu yoksa oluştur/giderler çünkü sütunların genişliği veya tablo, artırmadan) gibi olmalı

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------

Bu almak için denemek için farklı CSS teknikleri çok denedim, ama dışarı çıkamıyorum. Mootables bu bulduğum tek şey: http://joomlicious.com/mootable/ ama nasıl yaptıklarını çözemedim. Herkes kendi masama CSS ve/veya Javascript kullanarak bunu daha ne kadar yapabilirim, ya da Mootables nasıl biliyor?

Örnek HTML

<html><body>
<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table></body></html>

CEVAP

8 Ocak 2009, PERŞEMBE

CSS senin td white-space: nowrap overflow: hidden özelliği kullanın.

Güncelleme

Sadece emin ne düşünüyordum yorumunuzu gördüm, değil, bunu çok kez yaptım nasıl yaptığımı unuttum. Bu benim için en tarayıcılarda çalışan bir yaklaşım... td sınırlamak için denemek yerine, taşma örneği işleyeceği td içinde bir div kullanıyorum. Bu dolgu, kenar boşlukları, arka plan renkleri, vb eklemek için güçlü olmak güzel bir yan etkisi yoktur. stil td için çalışan div ziyade.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
		this is the text in column one which wraps</div></td>
   <td>
	<div class="hideextra" style="width:100px">
		this is the column two test</div></td>
</tr>
</table>
</body>
</html>

Bir bonus olarak, IE bir taşma durumunda tarayıcı özgü metin taşma:üç nokta stilini kullanarak üç nokta koyar. 11* *otomatik olarak da bir yolu var, ama kendim test etmedim.