すべての列を折りたたむ

tdタグをすべての列にまたがるように指定するにはどうすればよいですか（テーブル内の列の正確な数が可変で、HTMLがいつレンダリングされるかを決定するのが難しい場合）？w3schoolsはを使用できると述べていますがcolspan="0"、どのブラウザーがその値をサポートしているかを正確に示していません（IE 6はサポートするリストにあります）。

colspan理論上の列数よりも大きい値に設定しても機能するようですが、にtable-layout設定した場合は機能しませんfixed。多数の自動レイアウトを使用することの欠点はありますcolspanか？これを行うより正しい方法はありますか？

IE 7.0、Firefox 3.0、Chrome 1.0を使用しています

TDのcolspan = "0"属性は、上記のブラウザのすべてのTDにまたがっていません。

おそらく適切なマークアップの実践としてはお勧めできませんが、可能な合計よりも高いcolspan値を指定した場合はできません。他の行の列の場合、TDはすべての列にまたがります。

これは、table-layout CSSプロパティがfixedに設定されている場合は機能しません。

繰り返しますが、これは完璧な解決策ではありませんが、テーブルレイアウトのCSSプロパティが自動の場合、上記の3つのブラウザーバージョンで機能するようです。お役に立てれば。

これを使うだけです：

colspan="100%"

Firefox 3.6、IE 7、Opera 11で動作します！（そして私は他の人に推測し、私は試すことができませんでした）

警告：以下のコメントで述べられているように、これは実際にはと同じcolspan="100"です。したがって、このソリューションは、css table-layout: fixedまたは100を超える列を含むテーブルでは機能しません。

すべての列にまたがる「タイトル」セルをテーブルのヘッダーとして作成する場合は、キャプションタグ（http://www.w3schools.com/tags/tag_caption.asp / https：//）を使用できます。 developer.mozilla.org/en-US/docs/Web/HTML/Element/caption）この要素はこの目的のためのものです。これはdivのように動作しますが、テーブルの親の幅全体には及びません（divが同じ位置にあるように（これは家で試してはいけません！））、代わりに、テーブル。国境などのクロスブラウザの問題があります（私には問題ありませんでした）。とにかく、すべての列にまたがるセルのように見せることができます。内で、div要素を追加して行を作成できます。tr要素の間に挿入できるかどうかはわかりませんが、ハッキングになると思います（そのためお勧めしません）。別のオプションは、フローティングdivをいじり回すことですが、それは残念です！

行う

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

しない

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

部分的な答えとしてcolspan="0"、質問で言及されたに関するいくつかのポイントを次に示します。

tl; drバージョン：

colspan="0"どのブラウザでも機能しません。W3Schoolsは（いつものように）間違っています。HTML 4ではcolspan="0"、これにより列がテーブル全体に広がるはずですが、これは実装されておらず、HTML 4の後に仕様から削除されました。

さらに詳細と証拠：

• すべての主要なブラウザはそれをと同等として扱いますcolspan="1"。

  これを示すデモがあります。お好きなブラウザでお試しください。

  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>

  コードスニペットを実行する結果を非表示

  スニペットを展開

• HTML 4仕様（現在は古くて時代遅れですが、現在この質問が行われたときのことです）はcolspan="0"、すべての列にまたがるものとして扱う必要があると実際に言っています。

  値ゼロ（ "0"）は、セルが定義されている列グループ（COLGROUP）の現在の列から最後の列までのすべての列にセルが及ぶことを意味します。

  ただし、ほとんどのブラウザはこれを実装していません。

• HTML 5.0（2012年に推奨候補になりました）、WhatWG HTMLリビング標準（今日の主要な標準）、および最新のW3 HTML 5仕様にはすべて、上記のHTML 4から引用された表現が含まれていませんcolspan。許可されていません。この表現は3つの仕様すべてに表示されます。

  tdそしてth要素は持っていることがありcolspan、コンテンツの属性は、値がゼロより有効な非負整数大きくする必要があり、指定されました...

  出典：

  • 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ページからの以下の主張は、少なくとも今日では完全に誤りです。

  Firefoxのみがcolspan = "0"をサポートします。これは特別な意味を持っています... [It]ブラウザーにセルを列グループ（colgroup）の最後の列にスパンするように指示します

  そして

  HTML 4.01とHTML5の違い

  無し。

  W3Schoolsが頻繁に不正確であるためにWeb開発者によって侮辱されていることにまだ気付いていない場合は、このレッスンをその理由と考えてください。

IE 6の場合、colspanをテーブルの列数と等しくする必要があります。5つの列がある場合は、次のようになりますcolspan="5"。

その理由は、IEがcolspansを異なる方法で処理するためであり、HTML 3.2仕様を使用します。

IEはHTML 3.2定義を実装し、colspan=0として設定しcolspan=1ます。

バグは十分に文書化されています。

jQueryを使用している場合（または追加してもかまわない場合）、これにより、これらのどのハックよりも作業が効率的に行われます。

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;

}

実装を簡単にするために、「maxCol」などのクラスで調整する必要があるtd / thを装飾します。これで、次のことができます。

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

これが機能しない実装を見つけた場合は、答えを非難せず、コメントで説明してください。カバーできる場合は更新します。

別の機能しますが醜い解決策：colspan="100"、ここで100は必要な列の合計よりも大きい値ですcolspan。

W3Cによると、このcolspan="0"オプションはCOLGROUPタグでのみ有効です。

以下は簡潔なes6ソリューションです（Rainbabbaの回答に似ていますが、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>

私の経験を追加してこれに答えたいだけです。
注：これは、事前に定義されたtableとtrwith thがあり、行に（たとえばAJAXを介して）動的にロードしている場合にのみ機能します。

この場合th、最初のヘッダー行にあるの数を数え、それを使用して列全体に広げることができます。

これは、結果が見つからないときにメッセージをリレーする場合に必要になることがあります。

jQueryでの次のようなものtable。入力テーブルはどこですか。

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

多分私はまっすぐな思想家かもしれませんが、私は少し困惑しています、あなたはあなたのテーブルの列番号を知りませんか？

ちなみに、IE6はcolspan = "0"を尊重していません。colgroupが定義されていてもいなくてもかまいません。また、theadとthを使用して列のグループを生成しようとしましたが、ブラウザはcolspan = "0"のフォームを認識しません。

私はWindowsおよびLinuxでFirefox 3.0を試してみましたが、厳密なdoctypeでのみ機能します。

あなたはいくつかのクッパでテストをチェックすることができます

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

私はここにテストページを見つけましたhttp://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

編集：リンクをコピーして貼り付けてください。フォーマットはリンク内の二重プロトコル部分を受け入れません（または正しくフォーマットするのがあまり賢くない）。

仕様によると、colspan="0"テーブル幅tdになるはずです。

ただし、これはテーブルに幅がある場合にのみ当てはまります。テーブルには、異なる幅の行が含まれる場合があります。したがって、colgroupを定義した場合、レンダラーがテーブルの幅を知っている唯一のケースです。そうでない場合、colspan = "0"の結果は不確定です...

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

古いブラウザではテストできませんが、これは4.0以降の仕様の一部です...

「colspan」の代わりに「colSpan」を使用してみてください。IEはcamelBackバージョンを気に入っています...