How can I force a table cell onto a new row


Tags: html,css,tablelayout,webgrid

Problem :

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?



Solution :

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>


    CSS Howto..

    How to style html element directly (inline)?

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    How to send web page in email body with css

    CSS: How to refer to a tag

    How do I implement CSS + JavaScript scripts on specific pages on our Drupal site? [closed]

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    How to show html template using inline styles only?

    how to nest css boxes with relative positioning and absolute positioning

    how to make an interactive uploader like gmail and facebook have?

    How to Change CSS of Custom Template JointJS Element?

    how to implement background img

    How Can i Make a column to fill all the way to the sides in bootstrap

    Google font - how to specific font-family If they have the same name?

    How do I make a line feed in a div tag?

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    CSS selectors: how to make element hovering change wrapper's style

    How does this CSS produce a circle?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    How to hide some text in the middle of a string with only css [duplicate]

    How to remove gap above and below my div? [duplicate]

    How to read different CSS classes with the same beginning with jquery?

    How to stop Table within a Table inheriting style of first table?

    How to lock scroll for all page?

    How can I hide page elements till an AJAX call completes?

    How to make certain text not selectable with CSS [duplicate]

    How do I get a jquery function to only affect the child element of 'this'

    How to define the width of a HTML element dynamically

    How to make a parent object in CSS menu stay in hover state when children are hovered over

    How do I center the body text div?

    How can I change input type of Yii CJuiAutoComplete?