Last td on new line?

Question

I converted some tabular data from word for 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>

It's tabular data. It should be in a table :)

In the word doc, he put the last cell (the Dutch description) on a new line. I could regex every last cell to a new row with colspan="2", but that's not the structure. I tried:

td:last-child {
  display: block;
}

But every browser ignores that. Any ideas?

EDIT: It sounds a little 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

Lacagnia

Table cells shouldn't be turned into blocks... – Compte

Can you post a screenshot of what you are trying to achieve? – Cauline

@Marc B Should I put every third cell in a new row? – Lacagnia

Yes -a new row. Since you're working in a table, you should stick with table semantics. – Compte

While I wouldn't do this, you could place a 2-row table in each td, if you just want to keep the data together logically in html, however, it's much more code and nasty... I'd go with the new row like @MarcB said, unless you have a huge objection. – Cauline

So what's wrong with making a new <tr> for each of the <td>s 1.3, 2.3, and 3.3? – Subsellium

@MarcB - Email clients should support css. – Dugaid

@dementic: I didn't say they didn't. I said you shouldn't abuse the system by turning a table cell into something it was never intended to be. – Compte

Answer 1

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>

Inflatable

a row isn't the same as a line. For example: bytes.com/topic/html-css/answers/… – Lacagnia

Yes, that is an example of broken functionality (it certainly will not work in IE). Sure, you CAN find work arounds, but a row is supposed to be a new line. May I ask why you are using a table if you don't want a table's functionality? You could achieve this better by using <div>'s. – Inflatable

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

Salema

Answer 3

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

Corrugate

That's the last option. The cells should be on the same row. – Lacagnia

You can't make the <td> columns on the same row in HTML and still make the last column start on a new line. If they're on the same row, they're going to render on the same row... – Corrugate

Tables don't work like that though, it's not just a vague entity, it's a structured table. Think of a table like an excel chart. You can't have cell B3 show up on row C. – Inflatable

bytes.com/topic/html-css/answers/… – Lacagnia