IE8 mengecualikan kolom dari tbody

Saya mengalami masalah saat menampilkan beberapa tabel dalam satu halaman.

Kode tabelnya cukup sederhana. CSS menetapkan lebar setiap td sebesar % dan table-layout adalah fixed.

Sepertinya masalah ini disebabkan karena tabel pertama memiliki jumlah kolom X, tetapi tabel kedua memiliki X + 3. Hal ini menyebabkan kolom terakhir dikeluarkan dari badan tabel.

masukkan deskripsi gambar di sini

Saat memeriksa DOM, saya dapat melihat bahwa kolom terakhir di sebelah kanan ada di luar badan tabel (dalam desain) tetapi ada di dalam badan tabel dalam kode.

masukkan deskripsi gambar di sini

Jika saya menghapus table-layout:fixed dari css, tabelnya tumpang tindih, tetapi itu menerapkan warna latar CSS yang benar, dll. ke kolom terakhir. Ini juga terjadi jika saya membiarkan tata letak tabel apa adanya, tetapi menghapus atribut lebar: 100%. Jadi sepertinya ini juga bisa menjadi masalah ketika lebar tabel tetap dipertahankan di seluruh tabel sejak tabel pertama.

Saya yakin ini sangat terkait dengan jawaban SO ini.

masukkan deskripsi gambar di sini

Ada ide?

<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
            </td>
        </tbody>
    </table>
</div>
<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
               <td>2</td>
            </tr>
        </tbody>
    </table>
</div>

html css html-table internet-explorer-8 tablelayout
person RonnyKnoxville    schedule 07.01.2015    source sumber
comment
@chovy proyek ini untuk perusahaan besar. Saya pikir memperbaiki masalah saya mungkin lebih mudah daripada mengupgrade semua mesin perusahaan.   -  person RonnyKnoxville    schedule 07.01.2015
comment
Anda dapat membuat jsfiddle dengan beberapa data ... sehingga orang dapat memainkannya ...   -  person Mihai Iorga    schedule 07.01.2015
comment
cara berpikir lama. hijau abadi sekarang. tidak ada lagi. saya tidak peduli jika ‹ IE11 tidak berfungsi.   -  person chovy    schedule 07.01.2015
comment
Ini lebih merupakan keamanan nasional daripada cara berpikir lama   -  person RonnyKnoxville    schedule 29.01.2015

Jawaban (1)


arrow_upward
0
arrow_downward

Solusi untuk ini adalah apa yang saya harapkan.

Ternyata IE (dan beberapa browser lainnya) akan mendasarkan semua tata letak tabel berdasarkan baris pertama dari tabel pertama.

Jadi jika Anda memiliki beberapa tabel pada satu halaman dengan jumlah kolom yang berbeda-beda, Anda bisa berakhir dalam situasi di mana kolom tambahan dibiarkan menggantung di ujung tabel, seperti yang saya alami.

Beberapa orang menyarankan penggunaan atribut colgroup dan col di atas thead, namun ternyata ini tidak berhasil untuk saya.

Sebagai gantinya, saya membuat thead tersembunyi di atas dokumen asli saya, yang berisi jumlah maksimum kolom yang diperlukan.

    <thead>
        <tr hidden="hidden">
            <th span="1"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="1"></th>
            <th span="2"></th>
        </tr>
    </thead>
    <thead>
        // My actual table headers
    </thead>
person RonnyKnoxville    schedule 07.01.2015