テーブルセルのテーブルの幅の100％を境にします

Question

I次のマークアップがあります。以下のCSSで

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

を：

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

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

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

問題は、テーブル行のボーダー含まれるテーブルセルの幅のみをカバーします。私は、テーブルのセルの幅を変更したり、別のテーブルセルを追加したりせずに、他のすべてのテーブルの行と同じように、最後のテーブル行の境界幅を同じにしたい（もちろん水平）。

はここでフィドルです：https://jsfiddle.net/tgry53ss/

これを達成するための方法上の任意のアイデア？

Answer 1

CSSにはrowspan/colspanが存在しないため、代わりにflexboxを使用して、必要な結果を得ることができます。それはまた、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>

編集：あなたがこれを行う、全体の幅を取るためにのみセルをたくない場合は：

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

Answer 2

は、あなたのCSSにこれを追加します。

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

それは実際には1つを作成せずに別のセルとその下のボーダーをレンダリングする方法。

fiddle

Answer 3

私はこれに対処する一つの方法は、その幅を上書きするために、インラインスタイルを使用する、あなたは最後のものを除いて、各列に2つのセルを持っていたので、あなたは50％にセル幅を設定すると仮定しています：

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