Colspan semua kolom

Bagaimana saya bisa menentukan tdtag harus menjangkau semua kolom (ketika jumlah kolom yang tepat dalam tabel akan variabel / sulit untuk menentukan kapan HTML sedang dirender)? w3schools menyebutkan Anda dapat menggunakan colspan="0", tetapi tidak disebutkan dengan jelas browser apa yang mendukung nilai tersebut (IE 6 ada dalam daftar kami untuk mendukung).

Tampaknya pengaturan colspanke nilai yang lebih besar daripada jumlah teoritis kolom yang mungkin Anda miliki akan berfungsi, tetapi tidak akan berfungsi jika Anda telah table-layoutmenyetel ke fixed. Apakah ada kerugian menggunakan tata letak otomatis dengan jumlah yang besar colspan? Apakah ada cara yang lebih tepat untuk melakukan ini?

Saya memiliki IE 7.0, Firefox 3.0 dan Chrome 1.0

Atribut colspan = "0" dalam TD TIDAK mencakup semua TD di salah satu browser di atas .

Mungkin tidak direkomendasikan sebagai praktik markup yang tepat, tetapi jika Anda memberikan nilai colspan yang lebih tinggi daripada total, tidak mungkin. kolom di baris lain , maka TD akan span semua kolom.

Ini TIDAK berfungsi ketika properti CSS tata letak tabel diatur ke diperbaiki.

Sekali lagi, ini bukan solusi yang sempurna tetapi tampaknya bekerja di 3 versi browser yang disebutkan di atas ketika properti CSS tata letak-tabel otomatis . Semoga ini membantu.

Gunakan ini saja:

colspan="100%"

Ini berfungsi pada Firefox 3.6, IE 7 dan Opera 11! (dan saya kira pada orang lain, saya tidak bisa mencoba)

Peringatan: sebagaimana disebutkan dalam komentar di bawah ini sebenarnya sama dengan colspan="100". Oleh karena itu, solusi ini akan dipecah untuk tabel dengan css table-layout: fixed, atau lebih dari 100 kolom.

Jika Anda ingin membuat sel 'judul' yang merentang semua kolom, sebagai tajuk untuk tabel Anda, Anda mungkin ingin menggunakan tag teks ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Elemen ini dimaksudkan untuk tujuan ini. Itu berperilaku seperti div, tetapi tidak menjangkau seluruh lebar induk tabel (seperti div akan melakukan di posisi yang sama (jangan coba ini di rumah!)), Sebagai gantinya, itu mencakup lebar meja. Ada beberapa masalah lintas-browser dengan batas dan semacamnya (dapat diterima untuk saya). Bagaimanapun, Anda dapat membuatnya terlihat sebagai sel yang membentang semua kolom. Di dalam, Anda dapat membuat baris dengan menambahkan elemen div. Saya tidak yakin apakah Anda bisa memasukkannya di antara tr-elemen, tapi itu akan menjadi retasan saya kira (jadi tidak disarankan). Pilihan lain akan bermain-main dengan divs mengambang, tapi itu yuck!

Melakukan

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Jangan

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

Sebagai jawaban parsial, inilah beberapa poin tentang colspan="0", yang disebutkan dalam pertanyaan.

tl; versi dr:

colspan="0"tidak berfungsi di peramban apa pun. W3Schools salah (seperti biasa). HTML 4 mengatakan bahwa colspan="0"seharusnya menyebabkan kolom untuk span seluruh tabel, tetapi tidak ada yang mengimplementasikan ini dan itu dihapus dari spec setelah HTML 4.

Beberapa detail dan bukti:

• Semua browser utama memperlakukannya setara dengan colspan="1" .

  Inilah demo yang menunjukkan ini; coba di browser yang Anda suka.

  td {
    border: 1px solid black;
  }

  <table>
    <tr>
      <td>ay</td>
      <td>bee</td>
      <td>see</td>
    </tr>
    <tr>
      <td colspan="0">colspan="0"</td>
    </tr>
    <tr>
      <td colspan="1">colspan="1"</td>
    </tr>
    <tr>
      <td colspan="3">colspan="3"</td>
    </tr>
    <tr>
      <td colspan="1000">colspan="1000"</td>
    </tr>
  </table>

  Jalankan cuplikan kodeSembunyikan hasil

  Luaskan cuplikan

• HTML 4 spek (sekarang tua dan usang, tapi kembali saat ketika pertanyaan ini diminta) tidak memang mengatakan bahwa colspan="0"harus diperlakukan sebagai mencakup semua kolom:

  Nilai nol ("0") berarti bahwa sel merentang semua kolom dari kolom saat ini ke kolom terakhir dari grup kolom (COLGROUP) di mana sel didefinisikan.

  Namun, sebagian besar browser tidak pernah menerapkan ini.

• HTML 5.0 (membuat rekomendasi kandidat pada tahun 2012), standar hidup WhatWG HTML (standar dominan saat ini), dan spesifikasi W3 HTML 5 terbaru semuanya tidak mengandung kata-kata yang dikutip dari HTML 4 di atas, dan dengan suara bulat menyetujui bahwa angka colspan0 tidak diperbolehkan, dengan kata-kata ini yang muncul dalam ketiga spesifikasi:

  The tddan thelemen dapat memiliki colspanatribut konten tertentu, yang nilainya harus bilangan bulat lebih besar non-negatif valid dari nol ...

  Sumber:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-ements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-ements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-ements

• Klaim berikut dari halaman W3Schools yang ditautkan dalam pertanyaan ini adalah - setidaknya saat ini - sepenuhnya salah:

  Hanya Firefox yang mendukung colspan = "0", yang memiliki arti khusus ... [Ini] memberitahu browser untuk merentang sel ke kolom terakhir dari grup kolom (colgroup)

  dan

  Perbedaan Antara HTML 4.01 dan HTML5

  TIDAK ADA.

  Jika Anda belum mengetahui bahwa W3Schools umumnya dianggap hina oleh pengembang web karena ketidakakuratannya yang sering terjadi, anggap ini pelajaran mengapa.

Untuk IE 6, Anda ingin menyamakan colspan dengan jumlah kolom di tabel Anda. Jika Anda memiliki 5 kolom, maka Anda akan menginginkan:colspan="5" .

Alasannya adalah bahwa IE menangani colspans secara berbeda, menggunakan spesifikasi HTML 3.2:

IE mengimplementasikan definisi HTML 3.2, ditetapkan colspan=0sebagai colspan=1.

Bug ini didokumentasikan dengan baik .

Jika Anda menggunakan jQuery (atau tidak keberatan menambahkannya), ini akan menyelesaikan pekerjaan dengan lebih baik daripada peretasan ini.

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { maxCol = colCount };
    });

    return maxCol;

}

Untuk memudahkan implementasi, saya menghias setiap td / th saya perlu disesuaikan dengan kelas seperti "maxCol" maka saya dapat melakukan hal berikut:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

Jika Anda menemukan implementasi yang tidak berhasil, jangan banting jawaban, jelaskan dalam komentar dan saya akan memperbarui jika dapat dicakup.

Solusi lain yang berfungsi tetapi jelek:, di colspan="100"mana 100 adalah nilai yang lebih besar dari total kolom yang Anda butuhkan colspan.

Menurut W3C, colspan="0"opsi hanya valid dengan COLGROUPtag.

Di bawah ini adalah solusi es6 ringkas (mirip dengan jawaban Rainbabba tetapi tanpa jQuery).

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});

html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}

<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>

Hanya ingin menambahkan pengalaman dan jawaban saya untuk ini.
Catatan: Ini hanya berfungsi ketika Anda memiliki yang telah ditentukan tabledan trdenganth , tetapi memuat di baris Anda (misalnya melalui AJAX) secara dinamis.

Dalam hal ini Anda dapat menghitung jumlah th ada di baris tajuk pertama Anda, dan menggunakannya untuk merentangkan seluruh kolom.

Ini dapat diperlukan ketika Anda ingin menyampaikan pesan ketika tidak ada hasil yang ditemukan.

Sesuatu seperti ini di jQuery, di mana tabletabel input Anda:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

Mungkin saya seorang pemikir langsung tetapi saya agak bingung, tidak tahukah Anda nomor kolom meja Anda?

By the way IE6 tidak menghormati colspan = "0", dengan atau tanpa grup yang ditentukan. Saya juga mencoba menggunakan thead dan th untuk menghasilkan grup kolom tetapi browser tidak mengenali bentuk colspan = "0".

Saya sudah mencoba dengan Firefox 3.0 di windows dan linux dan hanya bekerja dengan doctype yang ketat.

Anda dapat memeriksa tes pada beberapa bowser di

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Saya menemukan halaman tes di sini http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Sunting: Harap salin dan tempel tautan, pemformatan tidak akan menerima bagian protokol ganda dalam tautan (atau saya tidak begitu pintar untuk memformatnya dengan benar).

Menurut spesifikasi colspan="0"harus menghasilkan lebar tabel td.

Namun, ini hanya berlaku jika meja Anda memiliki lebar! Tabel mungkin berisi baris dengan lebar berbeda. Jadi, satu-satunya kasus bahwa penyaji mengetahui lebar tabel jika Anda mendefinisikan grup ! Jika tidak, hasil dari colspan = "0" tidak dapat ditentukan ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

Saya tidak dapat mengujinya di browser lama, tetapi ini adalah bagian dari spesifikasi sejak 4.0 ...

coba gunakan "colSpan" bukan "colspan". IE suka versi camelBack ...