Tablo sütun genişliklerini içerikten bağımsız olarak her zaman sabitlenmeye zorla

Bir html table-layout: fixedtablom ve ayarlı genişlikte bir td var. Sütun, boşluk içermeyen metin içeriğini tutacak şekilde genişlemeye devam eder. Bunu düzeltmenin her td'nin içeriğini bir div'e sarmaktan başka bir yolu var mı?

Örnek: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

Örnekte, AAAAAAAAAAAA ... içeren sütunun, açıkça 50 piksel genişliğe ayarlanmasına rağmen genişlediğini görebilirsiniz.

Tablonun genişliğini belirtin:

table
{
    table-layout: fixed;
    width: 100px;
}

JsFiddle'a bakın

Aşağıdaki CSS'ye bakmayı deneyin:

word-wrap:break-word;

Web tarayıcıları varsayılan olarak "kelimeleri" bölmemelidir, bu nedenle karşılaştığınız şey bir tarayıcının normal davranışıdır. Ancak bunu, kelime sarma CSS direktifiyle geçersiz kılabilirsiniz.

Tablonun tamamı için bir genişlik ve ardından sütunlar için bir genişlik ayarlamanız gerekir. "genişlik:% 100;" gereksinimlerinize bağlı olarak da iyi olmalıdır.

Sözcük kaydırmayı kullanmak istediğiniz şey olmayabilir, ancak düzeni bozmadan tüm verileri göstermek için kullanışlıdır.

Css'den ÖNCE tabloyu sağlam hale getirin. Tablonun genişliğini hesaplayın, ardından her bir td'nin açık bir genişliğe sahip olduğu ve tümü tablo etiketindeki genişliğe kadar olan bir 'kontrol' satırı kullanın.

Her yerde çalışmak için yüzlerce html e-postası yapmak zorunda kalmak, önce doğru HTML'yi kullanmak, ardından w / css stilini oluşturmak tüm IE'lerde, webkit'lerde ve mozillalarda birçok sorunu çözecektir.

yani:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Bir tabloyu 300 piksel genişliğinde tutacak. Uç noktalarda genişlikten daha büyük olan görüntüleri izleyin

Bir ekleyebilir diviçin tdki, o zaman tarzı. Beklediğiniz gibi çalışmalıdır.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Sonra css.

td div { width: 50px; overflow: hidden; }

Ayrıca "overflow: hidden" veya "overflow-x: hidden" (sadece genişlik için) ile de çalışabilirsiniz. Bu, tanımlanmış bir genişlik (ve / veya yükseklik?) Ve belki bir "display: block" gerektirir.

"Taşma: Gizli", tanımlı kutuya sığmayan tüm içeriği gizler.

Misal:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

DÜZENLEME: Yazıklar olsun bana, gördüm, zaten "taşma" kullanıyorsun. Sanırım işe yaramıyor, çünkü öğenize "display: block" ayarlamazsınız ...

Max-width: 50px olarak ayarlamayı deneyecektim;

Yüzdeleri de kullanabilir ve / veya sütun başlıklarında belirtebilirsiniz:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Yüzdeli bonus, daha düşük kod bakımıdır: sütun genişliklerini yeniden belirlemenize gerek kalmadan tablo genişliğinizi değiştirebilirsiniz.

Uyarı: Piksel cinsinden belirtilen tablo genişliğinin HTML 5'te desteklenmediğini anladığım kadarıyla; bunun yerine CSS kullanmanız gerekir.

Bu benim için çalışıyor

td::after { 
content: ''; 
display: block; 
width: 30px;
}