是否可以像在另一行中一样显示表格单元格？

Question

我在HTML中生成一个表格报告，需要在与其相关的行下方显示某些详细信息（与表格数据相关的注释）。想象逻辑结构是这样的东西： 但需要在其自己的行中显示“促销优惠备注”字段，如下所示：

使这一点变得困难的是促销优惠券需要与其他数据实际位于同一行。如果您查看来源（或至少遍历文档对象），您将在与项目描述相同的行中看到促销优惠备注，上面写着“WELCH'S减少了糖果SQZ JELLY”。

我需要做的事情在表面上显示为what's being done in this question，但非常显着的区别是我需要显示在表格行下方的详细信息实际上在< / strong>从DOM的角度来看行，而该问题的解决方案是创建一个新行。

在同一行中需要它的原因是我想要对表进行排序（使用令人敬畏的Dynatable库，尽管无论我使用什么，问题都会存在）。如果添加一个具有填充几乎所有列的非常宽的单元格的行，则会将表的完整性作为表格数据丢弃。通过添加<tr><td></td><td colspan=99>Promo note details here</td></tr>，我将使用非语义标记，这通常是完成的，但是阻止我将表视为数据源。

我怎样才能做到这一点？如何将表格单元格显示为在它自己的行中？

这是我失败的尝试：http://jsfiddle.net/brandonzylstra/pfvPk/如果你有任何好的想法，你可能最好先追求它们，因为我认为我的尝试是一个死胡同。

Answer 1

TD上需要float: left，而道明上的clear: both需要注释类。

See working jsFiddle demo

---

HTML

<table class="notes">
    <tr>
        <td>1</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td class="note">this is should appear to be in its own row, even though it's really on the row above. If I put lots of text into this, though, it will not expand naturally the way I want, since the whole cotton-pickin' cell is absolutely positioned. It all depends on the length of the text in this cell, and the width of the browser window. If I happen to guess just right, it may be okay. Otherwise no.</td>
    </tr>
    <tr>
        <td>2</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td class="note">this is should appear to be in its own row, even though it's really on the row above. If I put lots of text into this, though, it will not expand naturally the way I want, since the whole cotton-pickin' cell is absolutely positioned. It all depends on the length of the text in this cell, and the width of the browser window. If I happen to guess just right, it may be okay. Otherwise no.</td>
    </tr>
    <tr>
        <td>3</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td class="note">this is should appear to be in its own row, even though it's really on the row above. If I put lots of text into this, though, it will not expand naturally the way I want, since the whole cotton-pickin' cell is absolutely positioned. It all depends on the length of the text in this cell, and the width of the browser window. If I happen to guess just right, it may be okay. Otherwise no.</td>
    </tr>
    <tr>
        <td>4</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td class="note">this is should appear to be in its own row, even though it's really on the row above. If I put lots of text into this, though, it will not expand naturally the way I want, since the whole cotton-pickin' cell is absolutely positioned. It all depends on the length of the text in this cell, and the width of the browser window. If I happen to guess just right, it may be okay. Otherwise no.</td>
    </tr>
    <tr>
        <td>5</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td class="note">this is should appear to be in its own row, even though it's really on the row above. If I put lots of text into this, though, it will not expand naturally the way I want, since the whole cotton-pickin' cell is absolutely positioned. It all depends on the length of the text in this cell, and the width of the browser window. If I happen to guess just right, it may be okay. Otherwise no.</td>
    </tr>
</table>

---

CSS

html, body 
{
    margin: 0;
    padding: 0;
    border: none;
}
.notes tr:nth-child(even) 
{
    background-color: #efefef;
}
.notes td 
{
    float: left;
    border: solid 1px #ccc;
    padding: 3px;
    margin: 3px;
}
.note 
{
    clear: both;
    border: 1px outset #D3D3D3;
    background-color: white;
    padding: 2px !important;
    margin: 3px;
}

---

结果

Answer 2

您是否在float: left CSS上尝试了<td>？我想您可以从position: absolute选择器中移除td.note。