Последний тд на новой строке?

Question

Я преобразовал некоторые табличные данные из слова для клиента:

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

Это табличные данные. Должно быть в таблице:)

В слове doc он поместил последнюю ячейку (голландское описание) на новую строку. Я мог бы пересмотреть каждую последнюю ячейку в новую строку с colspan = "2", но это не структура. Я попробовал:

td:last-child {
  display: block;
}

Но каждый браузер игнорирует это. Есть идеи?

РЕДАКТИРОВАТЬ: Это звучит немного расплывчато, не так ли?

У меня есть:

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

Я хочу:

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

Таблицы не работают так.<tr> означает новую строку, <td> находится в той же строке.Вы никогда не будете иметь (или, по крайней мере, никогда не будете иметь) <td> из одних и тех же <tr> в разных строках.

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

Редактировать: Кажется, вы зациклены на использовании таблицпо какой-то причине в ситуации, которая не подходит для таблиц.Могу ли я предложить следующую реализацию (непроверенную, вы должны получить основы того, что я пытаюсь сделать)?

<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

попробуйте эту скрипку:

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;
}

, кажется, работает для меня.

У меня была такая же проблема.

Answer 3

Сделать ячейку 1.3, 2.3 и 3.3 новой <tr> с одним <td colspan="2">.