Last td on new line?

Tables don't work like that. <tr> signifies a new row, a <td> is on the same row. You'll never have (or at least should never have) <td>'s from the same <tr> on different lines.

cell 1.1                     cell 1.2                      
cell 2.1
cell 3.1                     cell 3.2                        
cell 4.1
cell 5.1                     cell 5.2                       
cell 6.3

Edit: It seems like you're hung up on using tables for some reason in a situation that is not suited for tables. May I suggest the following implementation (untested, you should get the basics of what I'm trying to do)?

.menu-item: {
  display: block;
}

.price: {
  float: right;
}

.description {
  clear: both;
}

<h3>Spaghetti</h3>
<div class="menu-item">
  <strong>Food name</strong>
  <span class="price">10.00</span>
  <span class="description">A great dish</span>
</div>

<div class="menu-item">
  <strong>Food name</strong>
  <span class="price">10.00</span>
  <span class="description">A great dish</span>
</div>

<div class="menu-item">
  <strong>Food name</strong>
  <span class="price">10.00</span>
  <span class="description">A great dish</span>
</div>

Make cell 1.3, 2.3, and 3.3 a new <tr> with a single <td colspan="2">.

try this fiddle:

https://jsfiddle.net/r47bm836/

table tr, table tr td:nth-last-child(1) {
    display: block !important;
    clear: both;
}
table tr, table tr td {
    clear: both;
}

seems to work for me.

I had same problem.