Machen Rand der Tabellenzelle 100% der Tabellenbreite

Question

Ich habe folgendes Markup:

<div class="table"> 
    <div class="row"> 
    <div class="cell">1</div> 
    <div class="cell">2</div> 
    </div> 
    <div class="row"> 
    <div class="cell">3</div> 
    <div class="cell">4</div> 
    </div> 
    <div class="row"> 
    <div class="cell">5</div> 
    </div> 
</div> 

Mit dem folgenden CSS:

.table { 
    display: table; 
    border-collapse: collapse; 
    width: 100% 
} 

.row { 
    display: table-row; 
    border-bottom: 1px solid black; 
} 

.cell { 
    display: table-cell; 
    width: 50%; 
} 

Das Problem ist, dass die Grenze der table-row deckt nur die Breite seiner enthaltenen Tabellenzellen ab. Ich möchte, dass die letzte Tabellenzeile die gleiche Rahmenbreite hat (horizontal natürlich;)) wie alle anderen Tabellenzeilen, ohne die Tabellenzellenbreite zu ändern oder eine weitere Tabellenzelle hinzuzufügen.

Hier ist die Geige: https://jsfiddle.net/tgry53ss/

Jede Idee, wie dies zu erreichen?

Answer 1

Da gibt es keine rowspan/colspan in CSS. Sie können stattdessen flexbox verwenden, um die gewünschten Ergebnisse zu erzielen. Es kann auch die einzige Zelle machen, die die gesamte verfügbare Breite nutzt, genau wie Colspan.

.row { 
 
    display: flex; 
 
    border-bottom: 1px solid; 
 
} 
 
.cell { 
 
    flex: 1; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell">1</div> 
 
    <div class="cell">2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">3</div> 
 
    <div class="cell">4</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">5</div> 
 
    </div> 
 
</div>

Edit: Falls Sie nicht die einzige Zelle wollen die gesamte Breite zu nehmen, dies tun:

.row { 
    display: flex; 
    border-bottom: 1px solid; 
} 
.cell { 
    flex: 0 0 50%; 
} 

Answer 2

Fügen Sie diese auf Ihrem CSS:

.row:last-child::after { 
    content:' '; 
} 

diese Weise ist es eine andere Zelle und ihrer unteren Grenze, ohne tatsächlich die Schaffung eines machen wird.

fiddle

Answer 3

ich Dir gehe davon auf 50% Zellenbreite, da Sie in jeder Zeile außer letzten zwei Zellen hatten, so eine Art und Weise des Umgangs mit dieser wird Inline-Styling verwenden, dass die Breite außer Kraft zu setzen:

<div class="cell" style="width:100%"> 
    5 
</div>