破台结构
破台结构
提问于 2013-09-20 10:10:01
我正在尝试修复移动视图端口中的表结构(这不是我的杂乱代码，但我需要在不添加额外类的情况下修复它)。
下面我尝试说明这个场景，下面您可以看到代码。希望这已经足够了，否则我会添加额外的代码。
--这是它在viewport中没有附加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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-20 10:32:41
由于不允许使用其他类，所以我猜也不允许编辑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。
Stack Overflow用户
发布于 2013-09-20 10:11:19
在第二个TR中，每个TD都有rowspan="2“。把它移开。您的第一个TR只有2TD。它应该会像预期的那样起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18914166
复制相关文章
相似问题
腾讯云开发者
