456

tdタグがすべての列にまたがるように指定するにはどうすればよいですか? w3schoolsは、 を使用できると述べていますがcolspan="0"、どのブラウザがその値をサポートしているかについては正確には述べていません (IE 6 は、サポートするリストに含まれています)。

列の理論上の量よりも大きな値に設定しても機能するように見えますが、 に設定しcolspanた場合は機能しません。の数が多い自動レイアウトを使用するデメリットはありますか? これを行うより正しい方法はありますか？table-layoutfixedcolspan

4

11 に答える 11

343

これを使用するだけです：

colspan="100%"

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

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

于 2011-02-17T11:04:47.150 に答える
290

IE 7.0、Firefox 3.0、および Chrome 1.0 を使用しています。

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

適切なマークアップの実践としては推奨されないかもしれませんが、可能な合計よりも高い colspan 値を指定した場合は、no. 他の行の列の場合、TD はすべての列にまたがります。

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

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

于 2008-12-29T21:44:16.827 に答える
70

表のヘッダーとして、すべての列にまたがる「タイトル」セルを作成する場合は、キャプション タグ ( 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>
于 2009-09-24T10:55:48.950 に答える
14

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

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

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

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

于 2008-12-29T21:39:39.443 に答える
12

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

実装を容易にするために、調整が必要な td/th を「maxCol」などのクラスで装飾し、次のようにします。

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

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

于 2014-03-28T19:52:59.113 に答える
6

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

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

于 2009-10-28T04:32:51.103 に答える
1

colspanテーブルの列数に設定するだけです。

他のすべての「近道」には落とし穴があります。

最善の方法はcolspan、最初に を正しい数値に設定することです。テーブルに 5 つの列がある場合colspan="5"は、すべてのシナリオで機能する唯一の方法です。いいえ、それは時代遅れの解決策ではなく、IE6 などにのみ推奨されるものでもありません。これは文字通り、これを処理する最良の方法です。

実行時に列数が変更されない限り、Javascript を使用してこれを解決することはお勧めしません。

列数が可変の場合は、colspan. 可変数の列がある場合、テーブルを生成しているものは何でも、テーブルの列数を計算するように適応できる必要があります。

他の回答が述べたように、テーブルがに設定されていない場合は、非常に大きな数にtable-layout: fixed設定することもできます。colspanしかし、この解決策は面倒だと思います。後で戻ってきて、テーブル レイアウトを固定する必要があると判断した場合、頭痛の種になる可能性があります。最初は正しくやったほうがいいです。

于 2022-02-11T03:57:15.357 に答える
-1

私の経験を追加して、これに答えたいだけです。
注: が事前定義されていて s がある場合にのみ機能しますが、table(trたとえばthAJAX を介して) 行を動的にロードしています。

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

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

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;
    }
}
于 2013-12-17T12:35:36.980 に答える