0

我试图让基本的 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>
4

0 回答 0