css - CSSを使用して列をスパンする方法

Question

基本的なCSSの「テーブル」スタイルを機能させようとしていますが、テーブル要素を複数の列にまたがらせる方法がわかりません。私のHTMLは次のようになります。

<div class="dtable">
    <div class="dspan-row">
        <div class="dcell">This text wants to span all 3 columns</div>
    </div>
    <div class="drow">
        <div class="dcell">First name:</div>
        <div class="dcell">Bob</div>
        <div class="dcell">Something else</div>
    </div>
    <div class="drow">
        <div class="dcell">Last name:</div>
        <div class="dcell">Smith</div>
        <div class="dcell">Something else</div>
    </div>
  </div>

私のCSSは次のようになります。

.dtable {display: table;}
.drow {display: table-row;}
.dcell {
    display: table-cell;
    padding: 10px;
}
    .dcell > * {vertical-align: middle;}
.dspan-row {???}

テキストがすべてのテーブル列にまたがるように、dspan-rowクラスのスタイルを設定するにはどうすればよいですか？そして、すべての列にまたがる行のテキストを提供するために子要素を使用する必要がありますか、それともその子要素を削除して書き込むために使用できる魔法がありますか？

<div class="dspan-row">This text wants to span all 3 columns</div>