Make a div full width when is a child from display:table?

Question

As you can see in the snippet, the div.detail won't take full width, even that it's set to block and width: 100%.

How can I make a div full width when Inside a display:table?

Is there any workaround?

.table {
  display: table;
  width: 400px;
}
.row {
  display: table-row;
}
.td {
  display: table-cell;
  border: 1px solid #ccc;
}
.detail {
  display: block;
  width: 100%;
}

<div class="table">
  <div class="row">
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
  </div>
  <div class="detail">
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
  </div>
  <div class="row">
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
  </div>
</div>

Please note that the .td width's must keep flexible, and the table-row and table-cell are required, and the widths of the columns must be consistent among rows..

I tryied this and:

.detail { display: table-caption; }

Almost does it, but it changes the order of the elements..

Answer 1

Yeah, use display: table; on rows.

.row {
    display: table;
    table-layout: fixed;
    width: 100%;     
}

.td {
    display: table-cell;
    text-align: center;
    border: 1px solid #ccc;
    padding: 1em 0;
}
.detail {
    width: 100%;
    background: gold;
}

<div class="row">
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Hey, I'm a sentence!</div>
  </div>
    <div class="row">
        <div class="detail">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.</div>
    </div>
   <div class="row">
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Td</div>
    <div class="td">Look man, I'm a sentence too!</div>
    <div class="td">Td</div>
  </div>