ฉันพยายามสร้างเลย์เอาต์ที่คล้ายกันดังต่อไปนี้:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

โดยที่ด้านล่างเติมช่องว่างของแถวบน

หากนี่เป็นตารางจริงฉันสามารถทำสิ่งนี้ได้อย่างง่ายดาย<td colspan="3">แต่เมื่อฉันสร้างเค้าโครงเหมือนตารางฉันไม่สามารถใช้<table>แท็กได้ เป็นไปได้โดยใช้ CSS?

ไม่มีง่ายๆ, CSS colspanสง่างามอนาล็อกเพื่อ

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

มี colspan ใน CSS ไม่เป็นเท่าที่ผมทราบ แต่จะมีcolumn-spanสำหรับรูปแบบคอลัมน์หลายในอนาคตอันใกล้ แต่เนื่องจากมันเป็นเพียงร่างใน CSS3 คุณสามารถตรวจสอบในที่นี่ อย่างไรก็ตามคุณสามารถแก้ไขปัญหาโดยใช้divและspanด้วยการแสดงผลแบบตารางเช่นนี้

นี่จะเป็น HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

และนี่จะเป็น CSS:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

เหตุผลเดียวที่จะใช้เคล็ดลับนี้คือการได้รับประโยชน์จากtable-layoutพฤติกรรมฉันใช้มันมากหากตั้งค่า div และ span width เป็นเปอร์เซ็นต์ที่แน่นอนไม่ได้ทำให้ข้อกำหนดการออกแบบของเราสมบูรณ์

แต่ถ้าคุณไม่ต้องการได้รับประโยชน์จากtable-layoutพฤติกรรมคำตอบของ Durilaiจะเหมาะกับคุณมากพอ

ข้อเสนอแนะอื่นคือการใช้ flexbox แทนตารางโดยสิ้นเชิง แน่นอนว่าเป็น "เบราว์เซอร์ที่ทันสมัย" แน่นอน แต่มาในปี 2016;)

อย่างน้อยนี่อาจเป็นทางเลือกสำหรับผู้ที่มองหาคำตอบในทุกวันนี้เนื่องจากโพสต์ต้นฉบับมาจากปี 2010

นี่คือคำแนะนำที่ดี: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}

<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

นั่นไม่ใช่ส่วนหนึ่งของขอบเขตของ CSS colspanอธิบายโครงสร้างของเนื้อหาของหน้าหรือให้ความหมายบางอย่างกับข้อมูลในตารางซึ่งเป็นงานของ HTML

หากต้องการให้คำตอบล่าสุด: วิธีที่ดีที่สุดในการทำวันนี้คือการใช้เค้าโครงตาราง css ดังนี้:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

และ HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

คุณสามารถลองใช้ระบบกริดเช่นhttp://960.gs/

โค้ดของคุณจะเป็นแบบนี้สมมติว่าคุณใช้เลย์เอาต์ "คอลัมน์ 12":

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>

ลองเพิ่มdisplay: table-cell; width: 1%;องค์ประกอบเซลล์ตารางของคุณ

.table-cell {
  display: table-cell;
  width: 1%;
  padding: 4px;
  border: 1px solid #efefef;
}

<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
</div>

ฉันเคยประสบความสำเร็จมาแล้วแม้ว่ามันจะขึ้นอยู่กับคุณสมบัติบางอย่างในการทำงาน:

table-layout: fixed border-collapse: separate

และเซลล์ 'ความกว้าง' ที่แบ่ง / ขยายได้อย่างง่ายดายเช่น 4 เซลล์กว้าง 25%:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}

<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

นอกจากนี้การใช้การแสดง: table-header-group หรือ table-footer group เป็นวิธีที่สะดวกในการกระโดดองค์ประกอบ 'row' ไปยังด้านบน / ล่างของ 'table'

ถ้าคุณใช้ div และ span มันจะใช้ขนาดรหัสมากขึ้นเมื่อแถวดาต้าตารางในปริมาณมากขึ้น รหัสด้านล่างนี้ได้รับการตรวจสอบในเบราว์เซอร์ทั้งหมด

HTML:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

CSS:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm

หากคุณมาที่นี่เพราะคุณต้องเปิดหรือปิดcolspanคุณสมบัติ (พูดสำหรับเลย์เอาต์มือถือ):

ทำซ้ำ<td>s และแสดงเฉพาะรายการที่ต้องการเท่านั้นcolspan:

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}

<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>

คุณสมบัติ CSS "column-count", "column-gap" และ "Column-span" สามารถทำได้ในลักษณะที่เก็บคอลัมน์ทั้งหมดของตารางหลอกไว้ใน wrapper เดียวกัน (HTML ยังคงดีและเรียบร้อย)

คำเตือนเดียวคือคุณสามารถกำหนดได้เพียง 1 คอลัมน์หรือคอลัมน์ทั้งหมดและการขยายคอลัมน์ยังไม่สามารถใช้งานได้ใน Firefox ดังนั้น CSS เพิ่มเติมบางอย่างจำเป็นต้องมีเพื่อให้แน่ใจว่าจะแสดงอย่างถูกต้อง https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    

<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>

ฉันมาที่นี่เพราะปัจจุบันบล็อกของตาราง WordPress ไม่รองรับพารามิเตอร์ colspan และฉันคิดว่าฉันจะแทนที่มันด้วย CSS นี่คือทางออกของฉันโดยสมมติว่าคอลัมน์มีความกว้างเท่ากัน:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}

<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>

คุณสามารถทำposition:absolute;สิ่งต่าง ๆ และระบุความกว้างได้เสมอ มันไม่ใช่วิธีที่คล่องแคล่วในการทำ แต่จะได้ผล

ฉันได้สร้างซอนี้:

http://jsfiddle.net/wo40ev18/3/

HTML

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

CSS

   #table {
    display:table;
}

.group {display: table-row-group; }

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}

สามารถใช้คลาส Media Query เพื่อให้ได้บางสิ่งที่ผ่านได้ด้วยมาร์กอัปซ้ำ นี่คือวิธีของฉันกับ bootstrap:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

colspan 1 สำหรับมือถือ, colspan 5 สำหรับผู้อื่นด้วย CSS ที่ใช้งานได้