htmlcsshtml-tabletablerowtablecell

Last td on new line?


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

Solution

  • 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>