1

我正在尝试修复移动视图端口中的表结构（不是我的凌乱代码，但我需要在没有添加其他类的情况下修复它）。

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

这是在视口中没有额外 CSS 的情况下的外观：

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

这就是我的css的样子：

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

这就是我希望它看起来的样子：

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

av = 头像

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

2 回答 2

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填充顶部下方。

就像我说的那样，一种肮脏的方式，但它有效。

于 2013-09-20T10:32:41.123 回答
0

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

于 2013-09-20T10:11:19.500 回答