How can I force a table cell onto a new row

Question

I have an HTML table (generated by an MVC WebGrid) that is 5 columns across. What I want is the first 4 columns to take up 100% of the width and the 5th column to sit underneath also taking up 100% of the width.

  <tr>
    <td class="date">13/05/2015 13:40:55</td>
    <td class="firstname">Bob</td>
    <td class="lastname">Reed</td>
    <td class="errors"></td>
    <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
  </tr>

There is accompanying CSS, but it doesn't have any relevance to the table layout.

I've got to admit I'm pretty much stumped. I've tried searching, but all I seem to find are questions about using the display:table / table-row / table-cell CSS properties on either div or list elements.

Is what I'm trying to do possible using only CSS to modify the current HTML, or is it likely to take a complete re-write of the HTML structure (and thus probably dropping the WebGrid) to get it to display how I want?

Answer 1

You may try to reset the display properties of table elements and use the flex model:

table,
tbody {
  display:inline-block;/* whatever, just  reset table layout display to go further */
}
td {
  border:solid 1px;
}
tr {
  display:flex;
  flex-wrap:wrap; /* allow to wrap on multiple rows */
}
td {
  display:block;
  flex:1 /* to evenly distributs flex elements */
}
.date, .profile {
  width:100%; /* fill entire width,row */
  flex:auto; /* reset the flex properti to allow width take over */
}

<table>
  <tr>
    <td class="date">13/05/2015 13:40:55</td>
    <td class="firstname">Bob</td>
    <td class="lastname">Reed</td>
    <td class="errors"></td>
    <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
  </tr>
</table>

Not too sure that each browsers will accept this the same ways. codepen to play with : http://codepen.io/anon/pen/WvwpQq

to stack tds, then display:block:

td {
  border:1px solid;
  display:block;
  } 

    <table>
      <tr>
        <td class="date">13/05/2015 13:40:55</td>
        <td class="firstname">Bob</td>
        <td class="lastname">Reed</td>
        <td class="errors"></td>
        <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
      </tr>
    </table>