Colspan / Rowspan สำหรับองค์ประกอบที่ตั้งค่าการแสดงผลเป็นเซลล์ตาราง

ฉันมีรหัสต่อไปนี้:

<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อย่างไร?

เท่าที่ฉันรู้การขาด colspan / rowspan เป็นเพียงหนึ่งในข้อ จำกัด ของdisplay:table. ดูโพสต์นี้:

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

เนื่องจาก OP ไม่ได้กำหนดไว้อย่างชัดเจนว่าโซลูชันจะต้องเป็น CSS ที่บริสุทธิ์ฉันจะดื้อดึงและใช้วิธีแก้ปัญหาที่ฉันคิดได้ในวันนี้โดยเฉพาะอย่างยิ่งเมื่อมันดูหรูหรากว่าการมีตารางอยู่ในตาราง

ตัวอย่างเท่ากับ <table> มีสองเซลล์ต่อแถวและรถสองแถวที่เซลล์ในแถวที่สองคือ td 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โดยได้รับแรงบันดาลใจจากคำตอบที่ล่าช้าที่นี่

วิธีที่ง่ายกว่าที่เหมาะกับฉันใน Chrome 30:

Colspan สามารถจำลองได้โดยใช้display: tableแทน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;
}

ข้อผิดพลาดประการเดียวคือเซลล์ของแถวที่ซ้อนกันจะไม่เรียงกันในแนวตั้งเนื่องจากมาจากตารางที่ต่างกัน

หากคุณกำลังมองหาวิธี CSS แบบตรงในการจำลอง colspan คุณสามารถใช้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>

เพียงใช้ไฟล์table.

ตารางจะขมวดเมื่อถูกใช้เพื่อวัตถุประสงค์ในการจัดวางเท่านั้น

ดูเหมือนว่าข้อมูลแบบตาราง (แถว / คอลัมน์ของข้อมูล) ดังนั้นฉันขอแนะนำให้ใช้ไฟล์table.

ดูคำตอบของฉันสำหรับคำถามนี้สำหรับข้อมูลเพิ่มเติม:

สร้างสิ่งเดียวกันกับ divs เป็นตาราง

นี่เป็นวิธีหนึ่งในการขยายคอลัมน์ใน CSS ที่ฉันใช้สำหรับสถานการณ์ของฉันเอง

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 กว้างขึ้นทั้งตาราง คุณไม่สามารถใช้เทคนิคนี้เพื่อ 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 เพื่อทำให้เต็มความกว้างของตาราง ตารางเองต้องการตำแหน่งที่สัมพันธ์กัน เราใช้ดัมมี่เซลล์เพื่อรักษาความสูงของแถวตำแหน่งที่แน่นอนไม่เป็นไปตามขั้นตอนของเอกสาร

แน่นอนคุณสามารถใช้ flexbox และ grid เพื่อแก้ไขปัญหานี้ได้ในทุกวันนี้

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>

รหัส

สามารถทำได้โดยใช้ CSS เพียงอย่างเดียวและจัดข้อความให้อยู่กึ่งกลางบน colspan "ปลอม"

เคล็ดลับคือการตั้งค่าแถวเป็น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>

ด้วยการใช้คลาส 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 TABLE ยังคงใช้งานได้ใน HTML5

หวังว่านี่จะช่วยใครบางคนได้

คุณสามารถกำหนดตำแหน่งของเนื้อหา colspan เป็น "สัมพัทธ์" และแถวเป็น "ค่าสัมบูรณ์" ดังนี้

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

คุณไม่สามารถบรรลุสิ่งนี้ได้ในปัจจุบัน

AFAIK สิ่งนี้จะครอบคลุมโดยCSS Tablesซึ่งเป็นข้อกำหนดที่ดูเหมือนจะอยู่ในสถานะ "กำลังดำเนินการ"

คุณสามารถลองใช้วิธีนี้ซึ่งคุณสามารถค้นหาวิธีใช้ colspan โดยใช้ div https://codepen.io/pkachhia/pen/JyWMxY

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

แม้ว่านี่จะเป็นคำถามเก่า แต่ฉันก็อยากจะแบ่งปันวิธีแก้ปัญหานี้

<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

ในกรณีของฉันฉันต้องนำเสนอข้อมูลที่ไม่ใช่ตารางในลักษณะตารางโดยรักษาความกว้างของคอลัมน์และตั้งชื่อให้กับส่วนย่อยของข้อมูล

ใช้ตารางที่ซ้อนกันเพื่อซ้อนช่วงคอลัมน์ ...

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