Tüm sütunları Colspan

Bir tdetiketin tüm sütunlara yayılması gerektiğini nasıl belirleyebilirim (tablodaki sütunların tam miktarı HTML'nin ne zaman oluşturulduğunu belirlemek için değişken / zor olduğunda)? w3schools kullanabileceğinizden bahsediyor colspan="0", ancak tam olarak hangi tarayıcıların bu değeri desteklediğini söylemiyor (IE 6 destek için listemizde).

Görünüşe colspangöre, teorik sütun sayısından daha büyük bir değere ayarlamanız işe yarayacaktır, ancak table-layoutayarladıysanız çalışmaz fixed. Çok sayıda otomatik düzen kullanmanın dezavantajları var colspanmı? Bunu yapmanın daha doğru bir yolu var mı?

IE 7.0, Firefox 3.0 ve Chrome 1.0'ım var

Colspan = bir TD "0" özelliği olan kapsayan DEĞİL tüm TD'leri genelinde yukarıdaki tarayıcılardan herhangi .

Belki uygun biçimlendirme uygulaması olarak tavsiye edilmez, ancak mümkün olan toplamdan daha yüksek bir colspan değeri verirseniz . diğer satırlardaki sütunlardan sonra TD tüm sütunlara yayılır.

Tablo düzeni CSS özelliği sabit olarak ayarlandığında bu çalışmaz.

Bir kez daha, bu mükemmel bir çözüm değil, ancak masa düzeni CSS özelliği otomatik olduğunda yukarıda belirtilen 3 tarayıcı sürümlerinde çalışıyor gibi görünüyor . Bu yardımcı olur umarım.

Sadece şunu kullanın:

colspan="100%"

Firefox 3.6, IE 7 ve Opera 11 üzerinde çalışıyor! (ve sanırım başkaları üzerinde deneyemedim)

Uyarı: aşağıdaki yorumlarda belirtildiği gibi bu aslında aynıdır colspan="100". Bu nedenle, bu çözüm css table-layout: fixedveya 100'den fazla sütun içeren tablolar için kırılacaktır .

Tablonuzun başlığı olarak tüm sütunlara yayılan bir 'başlık' hücresi oluşturmak istiyorsanız, başlık etiketini ( http://www.w3schools.com/tags/tag_caption.asp / https: // kullanmak isteyebilirsiniz. developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Bu unsur bu amaç içindir. Bir div gibi davranır, ancak tablonun üst öğesinin tüm genişliğini kapsamaz (bir div aynı konumda yapacağı gibi (bunu evde denemeyin!)), Bunun yerine tablo. Sınırlar ve benzeri bazı tarayıcılar ile ilgili sorunlar var (benim için kabul edilebilirdi). Her neyse, tüm sütunları kapsayan bir hücre olarak görünmesini sağlayabilirsiniz. İçinde div öğeleri ekleyerek satırlar oluşturabilirsiniz. Tr-elements arasına yerleştirip yerleştiremeyeceğinizden emin değilim, ama bu bir hack olurdu sanırım (bu yüzden önerilmez). Başka bir seçenek yüzen div ile uğraşmak olurdu, ama bu yuck!

Yapmak

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

Yapma

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

Kısmi bir cevap olarak, burada colspan="0"soruda belirtilen birkaç nokta var .

tl; dr sürümü:

colspan="0"hiçbir tarayıcıda çalışmaz. W3Schools yanlış (her zamanki gibi). HTML 4, colspan="0"bir sütunun tüm tabloyu kapsamasına neden olması gerektiğini söyledi , ancak kimse bunu uygulamadı ve HTML 4'ten sonra spesifikasyondan kaldırıldı.

Biraz daha ayrıntı ve kanıt:

• Tüm büyük tarayıcılar buna eşit olarak davranır colspan="1".

  İşte bunu gösteren bir demo; istediğiniz herhangi bir tarayıcıda deneyin.

  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>

  Kod snippet'ini çalıştırSonuçları gizle

  Snippet'i genişlet

• (Bu soru sorulduğunda artık eski ve modası geçmiş, ancak mevcut geri) HTML 4 Spec vermedi gerçekten söylemek o colspan="0"tüm sütunu kapsayan olarak ele alınmalıdır:

  Sıfır değeri ("0"), hücrenin, geçerli sütundan tüm sütunları hücrenin tanımlandığı sütun grubunun (COLGROUP) son sütununa yaydığı anlamına gelir.

  Ancak, çoğu tarayıcı bunu hiç uygulamadı.

• HTML 5.0 (2012'de bir aday önerisi yaptı), WhatWG HTML yaşam standardı (bugün baskın standart) ve en son W3 HTML 5 spesifikasyonlarının tümü yukarıdaki HTML 4'ten alıntılanan ifadeleri içermiyor ve oybirliğiyle colspan0 üç özellikte de görünen bu ifadeyle izin verilmez:

  tdVe thunsurlar olabilir colspan, değeri sıfırdan geçerli bir negatif olmayan tamsayı olmalıdır content özelliğini belirtilen ...

  Kaynaklar:

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

• W3Schools sayfasındaki soru ile bağlantılı aşağıdaki iddialar - en azından bugünlerde - tamamen yanlış:

  Sadece Firefox özel bir anlamı olan colspan = "0" 'ı destekler ... [It] tarayıcıya hücreyi sütun grubunun son sütununa (colgroup) yaymasını söyler

  ve

  HTML 4.01 ve HTML5 Arasındaki Farklar

  YOK.

  W3Schools'un web geliştiricileri tarafından sık sık yapılan yanlışlıklar nedeniyle genellikle hor görüldüğünün farkında değilseniz, bunun nedeninde bir ders olduğunu düşünün.

IE 6 için, tablonuzdaki sütun sayısına colspan eşittir. Eğer 5 sütun varsa, o zaman isteyeceksiniz: colspan="5".

Nedeni IE colspans'leri farklı şekilde ele alması , HTML 3.2 spesifikasyonunu kullanmasıdır:

IE 3.2 tanımı, bu ayarlar HTML uygulayan colspan=0olarak colspan=1.

Hata iyi belgelenmiştir .

JQuery kullanıyorsanız (veya eklemeyi umursamıyorsanız), bu işi bu hack'lerin herhangi birinden daha iyi yapar.

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;

}

Uygulamayı kolaylaştırmak için, "maxCol" gibi bir sınıfla ayarlanması gereken herhangi bir td / th süsleyin, sonra aşağıdakileri yapabilirim:

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

Bunun işe yaramayacağı bir uygulama bulursanız, yanıtı çarpmayın, yorumlarda açıklayın ve kapsam dahilinde olup olmadığını güncelleyeceğim.

Başka bir çalışan ama çirkin çözüm: colspan="100"burada 100, ihtiyacınız olan toplam sütunlardan daha büyük bir değerdir colspan.

W3C'ye göre, colspan="0"seçenek sadece COLGROUPetiketi ile geçerlidir .

Aşağıda (benzer bir özlü ES6 çözümdür Rainbabba cevabı ancak jQuery olmadan).

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>

Sadece deneyimimi eklemek ve buna cevap vermek istiyorum.
Not: Sahip olduğunuz önceden tanımlanmış zaman çalışır tableve trbirlikte th(AJAX yoluyla örneğin) sıralar halinde yükleme s, ama vardır dinamik.

Bu durumda th, ilk başlık satırınızda bulunanların sayısını sayabilir ve bunu tüm sütunu yaymak için kullanabilirsiniz.

Herhangi bir sonuç bulunamadığında bir mesajı iletmek istediğinizde bu gerekli olabilir.

tableGiriş tablonuz nerede jQuery böyle bir şey :

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

Belki düz düşünürüm ama biraz şaşkınım, tablonuzun sütun numarasını bilmiyor musunuz?

Bu arada IE6, tanımlanmış bir colgroup olsun veya olmasın colspan = "0" değerini kabul etmez. Ayrıca sütun grupları oluşturmak için thead ve th kullanmaya çalıştım ama tarayıcı form colspan = "0" tanımıyor.

Windows ve linux üzerinde Firefox 3.0 ile denedim ve sadece katı bir doktrin ile çalışıyor.

Bir testi birkaç bowser'da şu adresten kontrol edebilirsiniz:

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

Test sayfasını burada buldum http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Düzenleme: Lütfen bağlantıyı kopyalayıp yapıştırın, biçimlendirme bağlantıdaki çift protokol parçalarını kabul etmeyecektir (veya doğru şekilde biçimlendirmek için çok akıllı değilim).

Şartnameye göre colspan="0"bir tabla genişliği td ile sonuçlanmalıdır.

Ancak, bu yalnızca tablonuzun bir genişliği varsa doğrudur! Bir tablo, farklı genişliklerde satırlar içerebilir. Bu nedenle, bir colgroup tanımlarsanız , oluşturucunun tablonun genişliğini bildiği tek durumdur ! Aksi takdirde, colspan = "0" sonucu belirlenemez ...

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

Eski tarayıcılarda test edemiyorum, ancak bu 4.0'dan beri belirtimin bir parçası ...

"colspan" yerine "colSpan" kullanmayı deneyin. IE camelBack sürümünü seviyor ...