表示がテーブルセルに設定されている要素のColspan / Rowspan

108

私は次のコードを持っています：

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

かなり簡単です。要素のcolspan（またはcolspanと同等のもの）を追加するにはどうすればよいdisplay: table-cellですか？

html  css 
— マダラの幽霊
ソース
5
テーブルだけでいいの？それはずっと簡単でしょう。さらに、これが表形式のデータの場合は、セマンティックになります。
— punkrockbuddyholly
@thirtydotはおそらく可能ですが、それは面倒で不必要なことです。960のようなグリッドシステムは基本的にこれを実現しますが、ページレイアウト全体に対してです。
— punkrockbuddyholly
@MrMisterMan：あなたの言っていることがよくわかりません。960.gsはを使用しませんdisplay: table-cell。
— thirtydot 2012
@thirtydot申し訳ありませんが、OPからの具体的な質問を忘れてしまいました。そうです、CSSを介してcolspanを追加することはできません。divを行と列のように動作させることができ、複数の列にまたがるセルが含まれることを指摘しました。
— punkrockbuddyholly
組織の最初のレベルと同じように、シミュレートされたテーブルを使用します。たとえば、スティッキーフッターを作成することができます。colspanエミュレーションでは、一意のセルにネストされたテーブルを作成できます。これには、単一の行と必要な数のセルが含まれるか、単純なフローティングdivを使用します。
— Bernard Dusablon、2013

回答:

27

OPはソリューションが純粋なCSSでなければならないことを明確に規定していないので、私は頑固になり、特にテーブルの中にテーブルを置くよりもはるかにエレガントであるため、今日考え出した回避策を採用します。

例は、行ごとに2つのセルと2つの行を持つ<table>と同じです。2行目のセルは、colspan="2"。

私はこれをIceweasel 20、Firefox 23、IE 10でテストしました。

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}
<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>
スニペットを展開

実写（デモ）はこちら。

編集：デフォルトで背景色を残しているので、コードをよりプリンターフレンドリーになるように微調整しました。ここでの遅い回答に触発されて、rowspan-demoも作成しました。

— F-3000
ソース
同様の解決策を探しています。しかし、代わりに、一番上の行に5つのセルがあります。下の行には、上の行と同じサイズのセルが1つ必要です。次に、1つのセルがcolspan = 2で、もう1つのセルがcolspan = 2で、下の行にも合計5つのセルがあります。これがあなたの解決策に基づくjsfiddle問題です。何かご意見は？jsfiddle.net/7wdza4ye/1
— Varun Verma
1
@VarunVerma、セル7と8の間に空のセルを追加する必要があります<div class="cell"></div>。少なくとも（Firefoxでは）作品を追加するだけです。この設計では、空のセルを埋め込む必要があります。たとえば、セル7がcolspan = 3でセル8が正常である場合、セル7と8の間に2つの空のセルが必要になります。他にデザインしない限り（マージン？カスタマイズされた単一のdiv？） 。また、100pxと5セルの幅では物事が扱いにくくなります。単語がcss-cellsを拡張するため、overflow-settingsは違いをもたらさないようです。また、再計算する必要があるwidthためdiv.colspan>div>div。
— F-3000
出来た。ありがとう。実際、下の境界線が表示されていないため、セル8の後に空のセルを追加しました。こちらが最新のものです：jsfiddle.net/7wdza4ye/3。セル7とセル8の境界を取得する方法を確認しました。何か提案はありますか？ご協力いただきありがとうございます。
— Varun Verma 2017
1
@ VarunVerma、Chromeでは、8の後に空のセルがないと外側の境界が不完全だったので、実際に必要です。セル7と8の間に境界線を追加する簡単な方法は次のようになりますdiv.colspan{border-left:1px solid red}。div.colspanをボーダレスに設定するルールの下のどこかに配置する必要があります。そうしないと上書きされます。
— F-3000
@ F-3000に感謝します。それは役に立ちました。残りの部分は、F-3000のソリューションに基づく最新のリンクです。jsfiddle.net
— Varun Verma
16

Chrome 30で私のために機能する簡単なソリューション：

列のdisplay: table代わりにdisplay: table-rowを使用して、Colspanをエミュレートできます。

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

唯一の落とし穴は、積み重ねられた行のセルが異なるテーブルからのものであるため、垂直方向に整列しないことです。

— フィリップ97
ソース
7

colspanをシミュレートするまっすぐなCSSの方法を探している場合は、を使用できますdisplay: table-caption。

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>
スニペットを展開

— Stacigh
ソース
すごいですね！
— Raj Kamal 2017
1
display：table-captionを使用すると、htmlテーブルのcaption要素のように、すべての列にまたがって行がテーブルの上部に配置されるため、これは実際には機能しません。最初または最後の行のすべての列にまたがる場合のみ。
— ミシェル
6

単にを使用しtableます。

テーブルは、レイアウト目的で使用される場合にのみ不快になります。

これは表形式のデータ（データの行/列）のようです。したがって、私はを使用することをお勧めしますtable。

詳細については、この質問に対する私の回答を参照してください。

テーブルとしてdivを使用して同じものを作成する

— Curt
ソース
11
問題は、それが表形式のデータ用ではないため、テーブルを使用したくないからです:)
— Madara's Ghost
13
すべてをCSS化してテーブルのように動作させることが、テーブルを使用するよりもどういうわけか好ましいのかわかりません。確かにtr/ tdスパムは最も美しいhtmlではありませんが、それが唯一の理由ですか？テーブルはフォーマットに使用するための「意味のある」ものではなかったと誰もが言いますが、HTML自体は、Webアプリケーションを含め、今日の標準で許容できると考えることの半分を行うための「意味のあるもの」ではありません。
— わずか
4
ほぼ1年後、しかし-少し、私はあなたのいらだちを、「テーブルが古くなっている」以外の理由でテーブルを避けている人々と共有します。ただし、いくつかのレスポンシブデザインを実行しているので、テーブルをテーブルではなく、幅を狭くして再配置できると便利です。divのcolspanがないことを学ぶのは、ちょっと残念です。
— スピン
4

これは、私が自分の状況で使用したCSSで列をスパンする1つの方法です。

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>
— ティム
ソース
2
私は強化しなければならなかった.colspanとwhite-space: nowrap;私は望んでいた結果を得るために、それがとてもうまくいきました。
— kshetline
2

colspanをテーブル全体の幅に合わせるための解決策があります。この手法を使用して、テーブルの一部を縮小することはできません。

コード：

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>
スニペットを展開

説明：

colspanで絶対位置を使用して、テーブルの全幅にします。テーブル自体は相対位置が必要です。行の高さを維持するためにダミーセルを使用します。絶対位置はドキュメントのフローに従いません。

もちろん、フレックスボックスとグリッドを使用して、最近この問題に取り組むこともできます。

— JT Houtenbos
ソース
1

CSS

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

HTML 

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

コード

— bderevyaga
ソース
1

これは、純粋なCSSを使用して、「偽の」コルスパン全体でテキストを中央揃えにして行うことができます。

トリックは、行をに設定してからposition:relative、「空のdiv」rowを作成したい場所に配置しcolspan（機能heightするために必要）、cellコンテンツの場所をとして設定し、display:grid最後にposition:absolute要素に適用しますセル内（および他の絶対要素を中央に配置できるようにセルを中央に配置）。

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>
スニペットを展開

— Joe82
ソース
0

適切なdivクラスとCSS属性を使用することで、colspanとrowspanの望ましい効果を模倣できます。

ここにCSSがあります

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

ここにサンプルのHTMLがあります

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>

質問とほとんどの回答の両方で私が見ていることから、「テーブルセル」として機能している特定のdivに、埋め込みテーブルのように機能している別のdivを挿入してプロセスを開始できることを人々は忘れているようです以上。

***これは魅力的ではありませんが、このタイプのフォーマットを探していて、表を避けたい人には有効です。DATA LAYOUTの場合、TABLESは引き続きHTML5で機能します。

うまくいけば、これは誰かを助けるでしょう。

— JRC
ソース
まず、HTML5は完全にサポートされています。視覚的な書式設定にHTML5を使用するの<table>は避けてください。構造化データを表示するためにそれを使用するのは、他の何か（単なる例として）がタスクに適している場合を除いて、それを使用する必要がある場合です。第二に、男、4つのテーブル。あなたは興味深い質問をテーブル（rowspan）に持ってきましたが、あなたの答えは代わりに使用するために叫びます。私の解決策がここでどのように機能するか見てみましょう...<ul><table>
— F-3000
以前のコメントを編集しますが、時間制限が適用されます。colspanについての私の回答と同様に、rowspanは、元のアプローチよりもはるかに手間をかけずに達成できます。自分で見てください。
— F-3000
ご意見をいただきありがとうございます。HTML5がテーブルをサポートしていないと言ったことはありません。多くの人々は単にそれを避けようとしています。（広告タイプのページだけではなく）Webアプリを作成するときに、ボタンやコントロールの配置に固定レイアウトがさらに必要になる場合があります。
— JRC 2015
0

次のように、colspanコンテンツの位置を「相対」として設定し、行を「絶対」として設定できます。

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
— フスト
ソース
0

現在、これを達成することはできません。

私の知る限り、これは現在「作業中」の状態にあるように見える仕様であるCSSテーブルによってカバーされます。

— naXa
ソース
0

このソリューションを試すことができます。divhttps : //codepen.io/pkachhia/pen/JyWMxYを使用してcolspanを適用する方法を見つけることができ ます

HTML：

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

CSS：

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }
— pkachhia
ソース
-1

これは古い質問ですが、この問題の解決策を共有したいと思います。

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

こちらがフィドルです。これは実際にはスパンではなく、解決策は少しハックですが、状況によっては役立ちます。Chrome 46、Firefox 31、IE 11でテスト済み。

私の場合、列の幅を維持し、データのサブセクションにタイトルを付けて、表形式以外のデータを表形式で提示する必要がありました。

— ガブリエル
ソース
もちろん、いつでもBootstrapのようなグリッドソリューションを利用できます。この特定のケースでは、display：tableを提供するauto-widthが本当に必要でした。
— ガブリエル
また、スパンされたコンテンツに背景色を与える場合は、tdsの全量をtrに入力する必要があります:(
— Gabriel
最終的にテーブルを作成し、「表形式データ」の概念を再定義しました^^
— ガブリエル
-2

ネストされたテーブルを使用して列スパンをネストします...

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

または、列スパンが行全体をカバーする2つのテーブルを使用します...

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>
— ヘンリー・ジョージ
ソース
2
問題は、CSSを使用してそれを行う方法でした。
— EnnoGröper2013年
4
申し訳ありませんが、それは本当に悪い考えのように思えます。
— マダラのゴースト
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.