•  29-08-2019
  •  | 
  •  

質問

どのよう指定はできま td タグはスパンのすべての列が、具体的な金額のカラムを表す変数/定のHTML描画される)? w3schools 記載利用できる colspan="0", ないなどのブラウザではサポート値(IE6がリストへの支援である。

この設定 colspan 値以上となる理論上のカラムのままでは動作しない場合 table-layout 設定 fixed.不利なことはありませる自動レイアウトが多数 colspan?であり、より正しい方法？

役に立ちましたか？

解決

私はIE 7.0を持っている、Firefoxの3.0とChrome 1.0

TDではcolspan = "0" 属性は、 のスパニングされていないすべてのTD全体での上記のいずれかのブラウザの。

たぶん、適切なマークアッププラクティスとして推奨されていますが、可能な全無よりの高いCOLSPAN値を与えた場合ではありません。他の行の列のの場合、TDは、すべての列にまたがるでしょう。

テーブルレイアウトのCSSプロパティが固定に設定されているときに

のこれは動作しません。の

もう一度、これは完璧なソリューションではなく、テーブルレイアウトのCSSプロパティは、のの自動ときに上記3つのブラウザのバージョンを言及して動作するようです。この情報がお役に立てば幸いです。

他のヒント

ただ、これを使用します：

colspan="100%"

これは、Firefox 3.6、IE 7とOpera 11で動作します！

（と私は他人に推測、私は試すことができませんでした） <時間>

警告：この下のコメントで述べたように、実際にcolspan="100"と同じです。したがって、この解決策は、CSS table-layout: fixed、または100の以上の列を持つ表のために中断します。の

また'title'細胞に至るすべての列、ヘッダのテーブルは、使いたい場合キャプションタグ（http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)この要素その他の事由による事故があったことです。このように動作すdiv、なかなかできないので全体の幅は、親テーブルのような事に思いを同じ位置で試さないでください。)), その代わりに、広幅のです。あるクロスブラウザの問題は国境等をしなかったんだ。思いなかったということではないかとして、細胞に至るすべての列あります。内、列を追加div-。くなった場合に挿入することができます。での間tr-要素がこのハックをかくはなっています。別のオプションいろな変動divs、そうとは言え!

い

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

IE 6のために、あなたは、テーブル内の列の数に等しいCOLSPANしたいと思うでしょう。あなたは5つの列を持っている場合は、お勧めします：colspan="5"

。

その理由は、 IEがcolspansが異なりを扱い、それはHTML 3.2仕様を使用していることです。

  

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

バグはもあります文書化するます。

あなたは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を飾るます：

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

あなたは、実装を見つけた場合、これは、答えをスラムコメントで説明し、それをカバーすることができるならば、私は更新されますしていない、のために動作しません。

として十分な答えが、ここの数について colspan="0", は、上記の問題をもたらしていました。

tl;drバージョン:

colspan="0" 動作しない他のブラウザがあります。W3Schoolsは間違い（いつもの事ですが）HTMLの4と colspan="0" 必要がある列のスパン全体のテーブルが、誰も実施することから削除されたスペック後のHTML4.

詳しくは、証:

  • すべての主要なブラウザと同等の 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)は、細胞が定義されています。

    しかし、ほとんどすべてのブラウザで実装されません。

  • HTML5.0（候補者の推薦に、2012年にWhatWG HTMLの生活水準の主基準日）の最新のW3HTML5仕様のすべてを含まないう言葉を引用したHTMLから4は、上記の全会一致で合意する colspan 0は認められませんが、この言葉に現れるすべてのスペック：

    の td や th 要素が、 colspan コンテンツの属性が指定される値は、有効な非負整数がゼロより大き...

    資料

  • 以下の債権から のW3Schoolsページにリンクの問題 は少なくとも現在では完全false:

    みFirefoxを支えcolspan="0"は、特別の意味を...[It]かのブラウザの細胞への最後のカラムのカラムグループ(colgroup)

    や

    差HTML4.01およびHTML5

    します。

    されていない場合はそのW3Schoolsは、一般に開催された近のwebアプリケーションの開発者のために、頻繁に誤りがあり、この授業はいかがでしょうか。

別の作業が、醜いソリューション：100あなたがcolspan="100"する必要があり、合計の列よりも大きな値であるcolspan、

。

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

以下は、（ Rainbabbaの答えのになく、jQueryのない類似の）簡潔ES6ソリューションです。

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とtrsとthを持っている場合にのみ動作しますが、動的に（AJAX経由たとえば）あなたの行にロードされている。

。

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

あなたが結果が見つかりませんされているメッセージを中継するときに

これが必要になることができます。

tableがあなたの入力テーブルであるjQueryの、このような何か：

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

仕様colspan="0"によれば、テーブル幅TDをもたらすはずである。

あなたのテーブルは幅を持っている場合は、

しかし、これは唯一の真のです！表には、異なる幅の行が含まれていてもよいです。だから、レンダラはあなたが場合は、テーブルの幅を知っている唯一のケースは、COLGROUPを定義するの！それ以外の場合は、= "0" COLSPANの結果は不定です...

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

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

たぶん私はストレート思想家が、私は少し困惑よ、あなたはあなたのテーブルの列番号を知らないのか？

ところでIE6はとか、定義されたCOLGROUPせず、COLSPAN =「0」を尊重しません。 私は列のグループを生成するために、thead要素と目を使用することも試みたが、ブラウザでは、フォームはcolspan =「0」をrecognliseません。

私は、WindowsおよびLinux上のFirefox 3.0で試してみた、それは厳格なDOCTYPEでのみ動作します。

は、

で、いくつかのクッパのテストを確認することができます

ます。http：// browsershots .ORG /のhttp：//hsivonen.iki.fi/test/wa10/tables/colspan-0.htmlする

私はここに、テストページを発見のhttp：//hsivonen.iki .fi /試験/ WA10 /テーブル/ COLSPAN-0.html の

編集：リンクをコピーして貼り付けてください、書式設定は、リンク内の二重のプロトコル部分を受け付けません（または私はそれを正しくフォーマットするようにスマートではないよ）

。

私は同じ問題を持っていた - 私は..あなたが1つのTDにまたがるしたい任意のコントロールを置き、私の問題を解決する方法

の代わりに "COLSPAN" の "COLSPAN" を使用してみてください。 IEはキャメルバックのバージョンが好き...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top