web-dev-qa-db-ja.com

すべての列をスパン

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

理論上の列数を超える値にcolspanを設定してもうまくいくようですが、table-layoutをfixedに設定しているとうまくいきません。 colspanに多数の自動レイアウトを使用することに不利な点はありますか？これを行うより正確な方法はありますか？

htmlhtml-tabletablelayout
346
Bob

私はIE 7.0、Firefox 3.0およびChrome 1.0を持っています

TDのc​​olspan = "0"属性は、上記のいずれかのブラウザの場合に含まれるすべてのTDにわたってスパンしないです。

適切なマークアップ方法としてはお勧めできませんが、他の行の可能な合計列数よりも大きいcolspan値を指定すると、TDはすべての列にまたがります。

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

繰り返しますが、これは完璧な解決策ではありませんが、table-layout CSSプロパティがautomaticの場合、上記の3つのブラウザバージョンではうまくいくようです。お役に立てれば。

244
Nahom Tijnam

これを使うだけです：

colspan="100%"

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

警告：以下のコメントで言及されているように、これは実際にはcolspan="100"と同じです。したがって、この解決法はcss table-layout: fixedを持つテーブル、または100を超える列に対しては無効になります。

250
Cluxter

テーブルのヘッダとして、すべての列にまたがる「タイトル」セルを作成する場合は、キャプションタグ（ 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>
63
Akira

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

その理由は IEはcolspansを処理する 違って、HTML 3.2仕様を使用しているからです。

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

バグは よく文書化されています です。

14
George Stocker

部分的な答えとして、これは質問で言及された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の仕様（現在は古く、古くなっていますが、この質問が行われたときには戻ってきています） しました本当に言う that colspan="0"すべての列にまたがるものとして扱う：

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

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

  • HTML 5.0（2012年に勧告候補になりました）、WhatWG HTML生活標準（現在の主な標準）、および最新のW3 HTML 5仕様はすべて上記のHTML 4から引用された表現を含まず、全会一致でcolspan 0は許可されていません。この表現は3つの仕様すべてに見られます。

    td要素とth要素には、colspanコンテンツ属性を指定することができます。この属性の値は、0より大きい正の整数でなければなりません...

    出典：

  • W3Schoolsのページはこの質問にリンクしています からの次のような主張は - 少なくとも最近では完全に誤りです：

    Firefoxだけがcolspan = "0"をサポートしています。これは特別な意味を持ちます... [それは]ブラウザにセルを列グループの最後の列（colgroup）にまたがるように伝えます

    そして

    HTML 4.01とHTML 5の違い

    無し。

    W3Schoolsが一般的にその頻繁な不正確さのためにWeb開発者によって軽蔑されていることにまだ気付いていないのであれば、これをなぜ教訓と考えてください。

11
Mark Amery

もしあなたが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));
});

これがうまくいかない実装を見つけたら、答えをたたかないで、コメントで説明してください。それがカバーできるかどうか私は更新します。

11
rainabba

もう1つの実用的ではあるが醜い解決策：colspan="100"。100はcolspanに必要な合計列数よりも大きい値です。

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

4
Raptor

下記は簡潔なes6の解決策です（ Rainbabba's answer に似ていますが、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>
2
Sjeiti