如何使用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>