0

I'm trying to get basic CSS "table" styling to work, but I can't figure out how to get a table element to span multiple columns. My HTML looks like this:

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

My CSS looks like this:

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

How can I style a dspan-row class so that the text spans all of the table columns? And do I need to use a child element to supply the text for the row that spans all of the columns, or is there some magic I can use to eliminate that child element and just write

<div class="dspan-row">This text wants to span all 3 columns</div>
Bob.at.Indigo.Health
  • 11,023
  • 13
  • 64
  • 111
  • 1
    Is there a reason you are using divs instead of an actual table? – thgaskell Mar 06 '13 at 02:49
  • @thgaskell: Seemed like a good idea at the time. I'm using the divs to layout labels and editors in a form. The popular wisdom (subject to much heated discussion) seems to be to avoid tables for controlling layout that doesn't actually appear to be a table to the person staring at the screen. – Bob.at.Indigo.Health Mar 06 '13 at 03:26

0 Answers0