bastey bastey - 3 months ago 14
HTML Question

CSS Table Cell doesn't become full width

I want to create a table design in pure CSS. I gave different classes to

<span>
tags. They define the width of the cell. Now I want to insert a row with a single column (width 100%). But the
<span>
tags don't become 100%.

Please see the example:

<div class="table">
<span class="row head">
<span class="cell w40">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
</span>
<span class="row single"><span class="cell center">Full width?</span></span>
</div>


The CSS:

.table {
display: table;
width: 100%;
max-width: 800px;
}
.table .row {
display: table-row;
width: 100%;
}
.table .row.head {
font-weight: 600;
background: #d4291f;
color: white;
}
.table .row.head:hover .cell {
background: #d4291f;
}
.table .row:hover .cell {
background: #eeeeee;
}
.table .row.single .cell {
width: 100%;
display: block;
}
.table .cell {
padding: 8px 8px;
vertical-align: top;
display: table-cell;
}
.table .cell.w40 {
width: 40%;
}
.table .cell.w20 {
width: 20%;
}
.table .cell.center {
text-align: center;
}


Do you have any idea?

Answer

After some research I believe this is the way to make it work. Demo Link

<div class="table">
<span class="row head">
    <span class="cell w40">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
</span>
</div>
<div class="table">
  <span class="row single">
    <span class="cell center">
      Full width?
    </span>
  </span>
</div>

and the .css changes only a bit, I've removed the 'width: 100%;'

.table .row.single .cell {
  display: block;
}