Fred Tanışın. Tablo:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Fred'in evinde bir tuhaf alışkanlığı değişen boyutu, yani öğrendi gizlemek için bazı onun içerik olarak bas tüm diğer birimler üzerinde kıpırdamak ve Bayan Whitford oturma odası kapalı harap olmuştur:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Bu çalışır, ama Fred bir dırdır edip eğer onun doğru hücre (hangi adam lakaplı Celldito) vazgeçti biraz boşluk, onun sol hücre olmazdı kesildi çok uzun bir zaman. Onun aklı kurtarabilir misin?

Özetle: Nasıl olurda bütün boşluk PES hepsi tek bir tablo hücreleri eşit taşması ve?

Non-javascript bir çözüm olduğuna inanıyorum! Geç olması hiç olmamasından iyidir, değil mi? Bundan sonra tüm soru ve Google üzerinden tüm mükemmel. İşleri sayfa kabul edilemez yüklendikten sonra hareket hafif titreme buluyorum çünkü javascript bir düzeltme razı olmak istemedim.

Özellikleri:

• Hayır javascript
• Hayır, sabit düzeni
• Hiçbir ağırlık veya yüzde genişlik hileler
• Sütun herhangi bir sayı ile çalışır
• Sunucu tarafı nesil ve istemci tarafı güncelleme basit (hesaplama) gerekli
• Çapraz tarayıcı uyumlu

Nasıl çalışırİçinde tablo hücre göreceli olarak konumlandırılmış bir öğe kap. içinde iki farklı element içeriği iki kopyasını yer Ara eleman statik olarak konumlandırılmış gibi tablo hücrelerinin genişliğini etkileyecektir. Spacer hücrenin içeriğini kaydırmak için izin vererek, "en uygun" tablonun arıyoruz hücre genişliği. alabiliriz Bu da bize göreli olarak konumlandırılmış ana için görünür içeriğinin genişliği kısıtlamak için mutlak konumlandırılmış bir öğe kullanmak için izin verir.

Test edilmiş ve çalışan: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Sonuç Görüntüler:

JSFiddle: http://jsfiddle.net/zAeA2/

Örnek HTML/CSS:

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span> </span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}