html - 最后一个 td 上新线？

Question

我为客户从 word 转换了一些表格数据：

<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>表示新行，a<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

编辑： 在不适合表格的情况下，您似乎因为某种原因而挂断了使用表格。我可以建议以下实现吗（未经测试，您应该了解我正在尝试做的事情的基础知识）？

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

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

<tr>使用单个.将单元格 1.3、2.3 和 3.3 设为新单元格<td colspan="2">。