Ekranı tablo hücresine ayarlanmış öğeler için Colspan / Rowspan

Takip koduna sahibim:

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

Oldukça basit. İle elemanlar için bir colspan (veya colspan eşdeğeri) nasıl eklerim display: table-cell?

Bildiğim kadarıyla, colspan / rowspan eksikliği, sınırlamalarından sadece biridir display:table. Bu gönderiye bakın:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

OP, çözümün saf CSS olması gerektiğine açık bir şekilde hükmetmediğinden, inatçı olacağım ve bugün anladığım geçici çözümümü ekleyeceğim, özellikle de bir masanın içinde bir masa bulundurmaktan çok daha zarif olduğu için.

Örnek, satır başına iki hücre ve iki satır içeren <tablo> 'ya eşittir; burada ikinci satırdaki hücre bir td'dir colspan="2".

Bunu Iceweasel 20, Firefox 23 ve IE 10 ile test ettim.

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>

Canlı aksiyon (demo) burada .

DÜZENLEME: Varsayılan olarak arka plan renklerini dışarıda bıraktıkları için kodu daha yazıcı dostu olacak şekilde ayarladım. Ayrıca burada geç cevaptan esinlenerek satır aralığı-demosu oluşturdum .

Chrome 30'da benim için çalışan daha basit bir çözüm:

Colspan , satırlar display: tableyerine kullanılarak taklit edilebilir display: table-row:

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

Tek tuzak, yığılmış satırların hücrelerinin farklı tablolardan oldukları için dikey olarak hizalanmamasıdır.

Bir colspan simüle etmek için düz bir CSS yolu arıyorsanız, kullanabilirsiniz 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>

Basitçe bir table.

tablolar yalnızca düzen amacıyla kullanıldığında hoş karşılanmaz.

Bu tablo verilere benziyor (veri satırları / sütunları). Bu nedenle, bir table.

Daha fazla bilgi için bu soruya verdiğim cevaba bakın :

tablolarla aynı şeyi div'lerle oluşturmak

Kendi durumum için kullandığım CSS'deki sütunları yaymanın bir yolu.

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>

Colspan'i tüm tablonun genişliği yapmak için bir çözüm var. Bu tekniği, tablonun bir bölümünü sıralamak için kullanamazsınız.

Kod:

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

Açıklama:

Kolspan üzerinde, tablonun tam genişliği olmasını sağlamak için mutlak konumu kullanırız. Masanın kendisinin göreceli pozisyona ihtiyacı var. Satırların yüksekliğini korumak için bir dummycell kullanıyoruz, mutlak pozisyon belgenin akışını takip etmiyor.

Elbette bugünlerde bu sorunu çözmek için flexbox ve grid de kullanabilirsiniz.

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>

kod

Sadece saf CSS ile ve metni "sahte" sütun boyunca ortalayarak yapılabilir.

İşin püf noktası, satırları olarak ayarlamak position:relative, ardından yapmak istediğiniz yere "boş div'ler" rowyerleştirmek colspan( heightçalışmak için sahip olmaları gerekir ), celliçeriğin nerede olduğunu olduğu gibi ayarlamak display:gridve son olarak , position:absoluteöğeye uygulamaktır . hücrenin içinde (ve başka herhangi bir mutlak öğeyi ortalayabileceğiniz için ortalayın).

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

Uygun div sınıflarını ve CSS özniteliklerini kullanarak, colspan ve satır aralığının istenen etkilerini taklit edebilirsiniz.

İşte CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

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

İşte örnek 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>    

Hem sorularda hem de yanıtların çoğunda gördüğüm kadarıyla, insanlar "tablo hücresi" gibi davranan herhangi bir div'e gömülü bir tablo gibi davranan başka bir div ekleyebileceğinizi ve süreci başlatabileceğinizi unutuyor gibi görünüyor. bitmiş.

*** Göz alıcı değil, ancak bu tür biçimlendirme arayanlar için işe yarıyor ve TABLO'lardan kaçınmak istiyorlar. VERİ DÜZENİ içinse, TABLOLAR HTML5'te çalışmaya devam eder.

Umarım bu birine yardımcı olur.

Colspan içeriğinin konumunu "göreli" ve satırı "mutlak" olarak şu şekilde ayarlayabilirsiniz:

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

Bunu şu anda başaramazsınız.

AFAIK bu , şu anda "devam eden çalışma" durumunda görünen bir özellik olan CSS Tabloları tarafından kapsanacaktır .

Div https://codepen.io/pkachhia/pen/JyWMxY kullanarak colspan'ın nasıl uygulanacağını bulabileceğiniz bu çözümü deneyebilirsiniz.

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

Bu eski bir soru olsa bile bu soruna çözümümü paylaşmak isterim.

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

İşte bir keman . Bu gerçekten bir aralık değil ve çözüm biraz hilekar, ancak bazı durumlarda faydalıdır. Chrome 46, Firefox 31 ve IE 11'de test edilmiştir.

Benim durumumda, bazı tablo dışı verileri tablo halinde sunmak, sütunların genişliğini korumak ve verilerin alt bölümlerine başlık vermek zorunda kaldım.

Sütun aralıklarını iç içe yerleştirmek için iç içe geçmiş tablolar kullanın ...

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

Veya sütun yayılımının tüm satırı kapsadığı 2 tablo kullanın ...

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