Ich versuche, ein Layout zu erstellen, das dem folgenden ähnelt:

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

wo der Boden den Raum der oberen Reihe ausfüllt.

Wenn dies eine tatsächliche Tabelle wäre, könnte ich dies leicht erreichen <td colspan="3">, aber da ich einfach ein tabellenähnliches Layout erstelle , kann ich keine <table>Tags verwenden. Ist das mit CSS möglich?

Es gibt kein einfaches, elegantes CSS-Analogon für colspan.

Die Suche zu diesem Thema wird eine Vielzahl von Lösungen ergeben, die eine Vielzahl von Alternativen enthalten, einschließlich absoluter Positionierung, Größenanpassung sowie einer ähnlichen Vielzahl von browser- und umstandsspezifischen Einschränkungen. Lesen Sie und treffen Sie die bestmögliche Entscheidung, basierend auf dem, was Sie finden.

Soweit ich weiß, gibt column-spanes in CSS kein Colspan, aber in naher Zukunft wird es ein mehrspaltiges Layout geben. Da es sich jedoch nur um einen Entwurf in CSS3 handelt, können Sie ihn hier einchecken . Auf jeden Fall können Sie eine Problemumgehung mit divund spanmit einer solchen tabellenartigen Anzeige durchführen.

Dies wäre der 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>

Und das wäre das 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%; }

Der einzige Grund, diesen Trick zu verwenden, besteht darin, den Vorteil des table-layoutVerhaltens zu nutzen. Ich verwende ihn häufig, wenn nur die Einstellung von div und span width auf einen bestimmten Prozentsatz unsere Entwurfsanforderungen nicht erfüllt.

Aber wenn Sie nicht von dem table-layoutVerhalten profitieren müssen , dann würde Durilais Antwort Ihnen genug passen.

Ein weiterer Vorschlag ist die Verwendung von Flexbox anstelle von Tabellen insgesamt. Dies ist natürlich eine "moderne Browser" -Sache, aber komm schon, es ist 2016;)

Zumindest könnte dies heutzutage eine alternative Lösung für diejenigen sein, die nach einer Antwort suchen, da der ursprüngliche Beitrag aus dem Jahr 2010 stammt.

Hier ist eine großartige Anleitung: 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>

Das gehört nicht zum Geltungsbereich von CSS. colspanbeschreibt die Struktur des Seiteninhalts oder gibt den Daten in der Tabelle, die HTML-Aufgabe ist, eine Bedeutung.

So geben Sie eine aktuelle Antwort: Der beste Weg, dies heute zu tun, besteht darin, das CSS-Rasterlayout wie folgt zu verwenden:

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

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

Sie könnten versuchen, ein Rastersystem wie http://960.gs/ zu verwenden.

Ihr Code würde ungefähr so ​​aussehen, vorausgesetzt, Sie verwenden ein "12-Spalten" -Layout:

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

Versuchen Sie display: table-cell; width: 1%;, Ihrem Tabellenzellenelement etwas hinzuzufügen .

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

Ich hatte einige Erfolge, obwohl es auf ein paar Eigenschaften beruht, um zu funktionieren:

table-layout: fixed border-collapse: separate

und Zellenbreiten, die sich leicht teilen / überspannen, dh 4 x Zellen mit einer Breite von 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/

Das Anwenden von display: table-header-group oder table-footer-group ist außerdem eine praktische Möglichkeit, um 'row'-Elemente an den oberen / unteren Rand der' table 'zu springen.

Wenn Sie div und span verwenden, nimmt es mehr Codegröße ein, wenn die Datagrid-Tabellenzeile mehr Volumen hat. Dieser Code wird in allen Browsern überprüft

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

Wenn Sie hierher kommen, weil Sie das colspanAttribut aktivieren oder deaktivieren müssen (z. B. für ein mobiles Layout):

Dupliziere das <td>s und zeige nur die mit dem gewünschten 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>

Die CSS-Eigenschaften "Spaltenanzahl", "Spaltenlücke" und "Spaltenspanne" können dies so tun, dass alle Spalten der Pseudotabelle im selben Wrapper bleiben (HTML bleibt schön und ordentlich).

Die einzigen Einschränkungen bestehen darin, dass Sie nur eine Spalte oder alle Spalten definieren können und die Spaltenspanne in Firefox noch nicht funktioniert. Daher ist zusätzliches CSS erforderlich, um sicherzustellen, dass es korrekt angezeigt wird. 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>

Ich bin hierher gekommen, weil der WordPress-Tabellenblock derzeit den Colspan-Parameter nicht unterstützt und ich dachte, ich werde ihn durch CSS ersetzen. Dies war meine Lösung, vorausgesetzt, die Spalten haben die gleiche Breite:

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>

Sie können immer position:absolute;Dinge und Breiten angeben. Es ist keine sehr flüssige Art, es zu tun, aber es würde funktionieren.

Ich habe diese Geige geschaffen:

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-Klassen können verwendet werden, um mit doppeltem Markup etwas Passables zu erreichen. Hier ist mein Ansatz mit 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 für Handys, Colspan 5 für andere, bei denen CSS die Arbeit erledigt.