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

Can you post a screenshot of what you are trying to achieve? — JackWink, Oct 21 '11 at 15:09
Yes -a new row. Since you're working in a table, you should stick with table semantics. — Marc B, Oct 21 '11 at 15:22
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. — JackWink, Oct 21 '11 at 15:26
So what's wrong with making a new for each of the s 1.3, 2.3, and 3.3? — Pete Wilson, Oct 21 '11 at 15:26
@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. — Marc B, Sep 03 '13 at 14:24

score 6 · Accepted Answer · edited Jul 18 '20 at 02:48

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>

a row isn't the same as a line. For example: http://bytes.com/topic/html-css/answers/875010-td-display-block-not-working-internet-explorer — bopjesvla, Oct 21 '11 at 15:21
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
's. — Whetstone, Oct 21 '11 at 15:22

score 5 · Answer 2 · answered Oct 30 '17 at 23:38

5

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.

answered Oct 30 '17 at 23:38

Darren

51
1
1

score 2 · Answer 3 · answered Oct 21 '11 at 15:16

2

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

answered Oct 21 '11 at 15:16

kafuchau

5,573
7
33
38

That's the last option. The cells should be on the same row. – bopjesvla Oct 21 '11 at 15:18
1

You can't make the `` 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... – kafuchau Oct 21 '11 at 15:20
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. – Whetstone Oct 21 '11 at 15:20
http://bytes.com/topic/html-css/answers/875010-td-display-block-not-working-internet-explorer – bopjesvla Oct 21 '11 at 15:21

Last td on new line?

3 Answers3