Last td on a new line?

Question

I converted some tabular data from a word to a client:

<table> <tr> <th><p>SPAGHETTI &ndash; Deeg voorgerechten</p></th> </tr> <tr> <td>SPAGHETTI AL PESCATORE</td> <td>&euro;11.50</td> <td><p >Zeevruchten in speciale tomatensaus</p></td> </tr> <tr> <td>SPAGHETTI ALLA MATRICIANA</td> <td>&euro;9.25</td> <td><p >Met spek, knoflook in tomatensaus</p></td> </tr> <tr> <td>SPAGHETTI BOSCAIOLA</td> <td>&euro;10.25 </td> <td><p >Met ham, spek, knoflook in roomsaus</p></td> </tr> <table> 

This is tabular data. It should be in the table :)

In the word doc, it puts the last cell (Dutch description) on a new line. I could rename each last cell to a new row with colspan = "2", but this is not a structure. I tried:

 td:last-child { display: block; } 

But every browser ignores this. Any ideas?

EDIT: Sounds a bit vague, doesn't it?

I have:

 cell 1.1 cell 1.2 cell 1.3 cell 2.1 cell 2.2 cell 2.3 cell 3.1 cell 3.2 cell 3.3 

I want:

 cell 1.1 cell 1.2 cell 1.3 cell 2.1 cell 2.2 cell 2.3 cell 3.1 cell 3.2 cell 3.3 

Answer 1

Tables do not work. <tr> means a new line, a <td> is on the same line. You will never have (or at least never will) <td> from the same <tr> in 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 looks like you somehow depended on using tables in a situation that is not suitable for tables. Can I suggest the following implementation (untested, you should get the basics of what I'm trying to do)?

 <style> .menu-item: { display: block; } .price: { float: right; } .description { clear: both; } </style> <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> 

Answer 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 the same problem.

Answer 3

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