最后一个 td 上新线？答案

【问题标题】：Last td on new line?最后一个 td 上新线？
【发布时间】：2011-12-12 16:15:38
【问题描述】：

我为一个客户从 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

【问题讨论】：

表格单元格不应该变成块...
你能张贴你想要达到的目标的截图吗？
@Marc B 我应该将每三个单元格放在一个新行中吗？
是的 - 一个新行。由于您是在表中工作，因此您应该坚持使用表语义。
虽然我不会这样做，但如果您只是想在 html 中逻辑地保存数据，则可以在每个 td 中放置一个 2 行表，但是，它的代码更多且令人讨厌。 ..我会像@MarcB所说的那样选择新行，除非你有很大的反对意见。

标签： html css html-table tablerow tablecell

【解决方案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

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

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

【讨论】：

一行与一行不同。例如：bytes.com/topic/html-css/answers/…
是的，这是一个功能损坏的例子（它肯定不会在 IE 中工作）。当然，你可以找到解决方法，但是一行应该是一个新行。如果您不想要表格的功能，请问为什么要使用表格？您可以使用
更好地实现这一点。

【解决方案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;
}

似乎对我有用。

我有同样的问题。

【讨论】：

【解决方案3】：

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

【讨论】：

这是最后一个选项。单元格应位于同一行。
您不能在 HTML 的同一行中创建 <td> 列，并且仍然使最后一列从新行开始。如果它们在同一行，它们将在同一行渲染...
表格不是这样工作的，它不仅仅是一个模糊的实体，它是一个结构化的表格。将表格想象为 Excel 图表。您不能让单元格 B3 显示在 C 行上。
bytes.com/topic/html-css/answers/…