Menggunakan CSS td width absolute, position

Silakan lihat JSFIDDLE ini

td.rhead { width: 300px; }

Mengapa lebar CSS tidak berfungsi?

<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>

Juga, apa efek dari position: fixed, absolute dll terhadap lebar td jika ada? Saya mencari alasan yang lebih dari sekadar perbaikan. Saya berharap untuk memahami cara kerjanya.

Ini mungkin bukan yang ingin Anda dengar, tetapi display: table-celltidak memperhatikan lebar dan akan diciutkan berdasarkan lebar seluruh tabel. Anda bisa menyiasatinya dengan mudah hanya dengan memiliki display: blockelemen di dalam sel tabel itu sendiri yang lebarnya Anda tentukan, misalnya

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

Ini seharusnya tidak membuat banyak perbedaan jika <table>itu sendiri position: fixedatau absolut karena posisi sel semuanya statis relatif terhadap tabel.

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

EDIT: Saya tidak dapat mengambil kredit, tetapi seperti yang dikatakan komentar Anda dapat menggunakan min-widthalih-alih widthdi sel tabel sebagai gantinya.

Anda lebih baik menggunakan table-layout: fixed

Otomatis adalah nilai default dan dengan tabel besar dapat menyebabkan sedikit kelambatan sisi klien karena browser mengulanginya untuk memeriksa semua ukuran yang sesuai.

Memperbaiki jauh lebih baik dan menampilkan lebih cepat ke halaman. Struktur tabel bergantung pada lebar keseluruhan tabel dan lebar masing-masing kolom.

Di sini diterapkan ke contoh asli: JSFIDDLE , Anda akan melihat bahwa kolom yang tersisa dihancurkan dan tumpang tindih dengan kontennya. Kita dapat memperbaikinya dengan beberapa CSS lagi (yang harus saya lakukan adalah menambahkan kelas ke TR pertama):

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

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

    td.rhead {
        width: 300px
    }

Terlihat beraksi di sini: JSFIDDLE

Alasan tidak berfungsi di tautan yang Anda berikan adalah karena Anda mencoba menampilkan kolom 300px PLUS 52 kolom dengan rentang 7 kolom masing-masing. Kecilkan jumlah kolom dan berhasil. Anda tidak dapat memuat sebanyak itu di layar.

Jika Anda ingin memaksa kolom agar pas, coba setel:

body {min-width:4150px;}

lihat jsfiddle saya: http://jsfiddle.net/Mkq8L/6/ @mike Saya belum bisa berkomentar.

Alasannya, adalah, karena Anda tidak menentukan lebar tabel, dan seluruh td Anda meluap.

Ini misalnya , saya telah memberikan lebar tabel 5000px, yang menurut saya akan sesuai dengan kebutuhan Anda.

table{
    width:5000px;
}

Ini adalah kode yang sama persis dengan yang Anda berikan, yang baru saja saya tambahkan di lebar tabel.

Saya percaya apa yang terjadi, adalah karena TD Anda melewati lebar tabel default. Yang bisa Anda lihat, jika Anda menarik sekitar 45 td Anda di setiap tr, (yaitu kode yang Anda berikan dalam pertanyaan Anda, bukan jsfiddle) berfungsi dengan baik

Coba ini berhasil.

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

Coba gunakan

table {
  table-layout: auto;
}

Jika Anda menggunakan Bootstrap, kelas tablememiliki table-layout: fixed;default.

Gunakan properti tata letak tabel dan nilai "tetap" di tabel Anda.

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

Setelah mengatur seluruh lebar tabel, Anda sekarang dapat mengatur lebar dalam% dari td.

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

Anda dapat mempelajari lebih lanjut tentang di tautan ini: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Solusi gila saya.)

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

Jika lebar tabel misalnya 100%, coba gunakan lebar persentase pada td, misalnya 20%.

Bungkus konten dari sel pertama dalam div misalnya seperti itu:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Ini adalah jsfiddle .

Anda juga bisa menggunakan:

.rhead {
    width:300px;
}

tetapi ini hanya akan terjadi dengan beberapa browser, jika saya ingat dengan benar IE8 tidak mengizinkan ini. Secara keseluruhan, lebih aman untuk hanya menempatkan width=""atribut <td>itu sendiri.