破桌结构

Question

我正在尝试修复移动视图端口中的表结构（一个不是我的杂乱代码，但我需要修复它而不添加其他类）。

下面我试图说明这个场景，下面你可以看到代码。希望这已经足够了，否则我会添加额外的代码。

这是在视口中没有额外css时的外观：

 _________________
|    |            |
| av |  text      |
|____|____________|
|    |            |
| av |  username  |
|____|____________|

这就是我用css看的方式：

 ______
|      |          
| text |          
|______|__________
|_av|  |          |
       |          |
       | username |
       |__________|

这就是我想要的样子：

 _________________
|                 |
|      text       |
|_________________|
|    |            |
| av |  username  |
|____|____________|

av = avatar

HTML：

  <div class="row-fluid post-comment">      
    <div class="span6 offset3 margin-small">
        <table class="table table-condensed no-table-border">
            <tbody>
                <tr>
                    <td class="avatar">
                        <img src="http://placehold.it/40x40" class="img-circle">                            
                    </td>
                    <td class="text">
                        <p>text...</p>
                    </td>
                </tr>
                <tr class="user-card">
                    <td rowspan="2" class="avatar">
                        <img src="http://placehold.it/50x50" class="img-circle">                            
                    </td>
                    <td rowspan="2" class="username">
                        // content
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

的CSS：

.post-comment .span6 td.avatar {
    display: none;
}

.post-comment .span6 .user-card td.avatar {
    display: block;
}

Answer 1

由于不允许其他类，我也不允许编辑HTML。

我找到了一种真正的脏方法让它发挥作用：

.post-comment .span6 td.avatar {
    display: none;
}
.post-comment .span6 table {
    width: 120px;
    border-spacing: 0;
}
.post-comment .span6 table td {
    margin: 0;
    padding: 0;
    background: lightblue;
}
.post-comment .span6 td.text {
    display: block;
    position: absolute;
    width: 120px;
}

.post-comment .span6 .user-card td.avatar,
.post-comment .span6 .user-card td.username{
    display: table-cell;
    padding-top: 55px;
}

.text表格单元格显示为绝对块，位于其他单元格之上。要使单元格显示在.text下方，请添加填充顶部。

就像我说的那样，一种肮脏的方式，但是it works。

Answer 2

在第二个TR中，每个TD都有rowspan =“2”。删除它。你的第一个TR只有2个TD。它应该按预期工作。