Mutlak CSS td genişliğini kullanma, konum

Lütfen bu JSFIDDLE'ye bakın

td.rhead { width: 300px; }

CSS genişliği neden çalışmıyor?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Ayrıca, konumun etkileri nelerdir: sabit, mutlak vb. Varsa td genişlikleri üzerinde var mı? Düzeltmeden daha çok bir sebep arıyorum. Nasıl çalıştığını anlamayı umuyorum.

Bu duymak istediğiniz şey olmayabilir, ancak display: table-cellgenişliğe saygı göstermez ve tüm tablonun genişliğine bağlı olarak daraltılacaktır. display: blockTablo hücresinin içinde genişliğini belirttiğiniz bir öğeye sahip olarak bunu kolayca aşabilirsiniz.

<td><div style="width: 300px;">wide</div></td>

Hücrelerin konumlarının tümü tabloya göre statik olduğundan, <table>kendisinin position: fixedveya mutlak olması durumunda, bu pek bir fark yaratmamalıdır.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

DÜZENLEME: Kredi alamıyorum, ancak yorumların dediği gibi, min-widthbunun yerine widthmasa hücresi yerine sadece kullanabilirsiniz .

Kullanman daha iyi table-layout: fixed

Otomatik varsayılan değerdir ve büyük tablolarda, tarayıcı tüm boyutları sığdırmak için yinelediğinde istemci tarafında biraz gecikmeye neden olabilir.

Sabit çok daha iyidir ve sayfaya daha hızlı işlenir. Tablonun yapısı, tablonun toplam genişliğine ve sütunların her birinin genişliğine bağlıdır.

Burada orijinal örneğe uygulanır: JSFIDDLE , Kalan sütunların ezildiğini ve içerikleriyle örtüştüğünü fark edeceksiniz. Bunu biraz daha CSS ile düzeltebiliriz (tek yapmam gereken ilk TR'ye bir sınıf eklemektir):

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

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Burada eylemde görülüyor : JSFIDDLE

Sağladığınız bağlantıda çalışmamasının nedeni, 300 piksellik bir sütun PLUS 52 sütununu her biri 7 sütunluk bir aralıkta görüntülemeye çalışmanızdır. Sütun sayısını küçültün ve işe yarıyor. Bu kadarını ekrana sığdıramazsınız.

Sütunları sığmaya zorlamak istiyorsanız, ayarı deneyin:

body {min-width:4150px;}

jsfiddle'ıma bakın: http://jsfiddle.net/Mkq8L/6/ @mike Henüz yorum yapamıyorum.

Bunun nedeni, tablonun genişliğini belirtmemiş olmanız ve tüm td gruplarınızın taşmasıdır.

Örneğin bu , tabloya gereksinimlerinize uyacağını düşündüğüm 5000 piksellik bir genişlik verdim.

table{
    width:5000px;
}

Sağladığınız kodun aynısı, sadece tablo genişliğine ekledim.

Olanlara inanıyorum, çünkü TD'leriniz varsayılan masa genişliğini çok aşıyor. Gördüğünüz gibi, her tr'de td'lerinizden yaklaşık 45'ini çıkarırsanız (yani, jsfiddle değil, sorunuzda verdiğiniz kod) tam olarak iyi çalışıyor

Bunu deneyin.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Kullanmaya çalışmak

table {
  table-layout: auto;
}

Eğer Bootstrap kullanırsanız, sınıf tablevardır table-layout: fixed;varsayılan olarak.

Tablonuzda tablo düzeni özelliğini ve "sabit" değeri kullanın.

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

Tablonun tüm genişliğini ayarladıktan sonra, artık genişliği td'lerin% 'si olarak ayarlayabilirsiniz.

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

Bu bağlantıdan daha fazla bilgi edinebilirsiniz: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Çılgın çözümüm.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Tablo genişliği örneğin% 100 ise, td'de% 20 gibi bir yüzde genişliği kullanmayı deneyin.

Div'deki ilk hücreden içeriği şu şekilde sarın:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

İşte bir jsfiddle .

Ayrıca kullanabilirsiniz:

.rhead {
    width:300px;
}

ancak bu sadece bazı tarayıcılarda olacaktır, eğer doğru hatırlıyorsam IE8 buna izin vermiyor. Her şeyden önce, width=""özelliği <td>kendi içine koymak daha güvenlidir .