1
目标
我有一个水平表。我创建了一个桌面视图和一个移动视图。在移动视图中,所有信息均在桌面上显示在eatch下,每个信息都显示在彼此旁边。
这是应该的样子:
桌面
移动
总结多个的移动与自举
我现在的状态
我与引导工作。我做了一个表格布局,看起来应该如何在桌面上。如果我把它调整到移动,该信息将不包互相下方,但在桌面视图停留水平,如:
Codepen-Demo of current solution
而从Codepen代码(注意,我用的引导,所以我不认为如此产生的视图适合):
HTML
<table class="table table-striped borderless">
<tr>
<td class="col-xs-2">06:33</td>
<td class="col-xs-1 circle-td">
<span class="circle"><p>2h 55'</p></span>
</td>
<td class="col-xs-3"><strong>Drive</strong></td>
<td class="col-xs-3">18922</td>
<td class="col-xs-3">Home - Stop</td>
</tr>
<tr>
<td class="col-xs-2">06:33</td>
<td class="col-xs-1 circle-td">
<span class="circle"><p>2h 55'</p></span>
</td>
<td class="col-xs-3">
<small>Inbetween</small><br />
<strong>Snack</strong>
</td>
<td class="col-xs-3">18922</td>
<td class="col-xs-3">Stop</td>
</tr>
<tr>
<td class="col-xs-2">06:33</td>
<td class="col-xs-1 circle-td">
<span class="circle"><p>2h 55'</p></span>
</td>
<td class="col-xs-3"><strong>Drive</strong></td>
<td class="col-xs-3">18922</td>
<td class="col-xs-3">Stop - End</td>
</tr>
CSS
.table.borderless>tbody>tr>td{
border-top: none;
}
.circle-td{
background: #fff;
background: linear-gradient(180deg, transparent, #353535, transparent);
background-position: 50%;
background-repeat: repeat-y;
background-size: 1px auto;
text-align: center;
}
.circle{
border: 1px solid black;
text-align: center;
display: table;
padding: 5px;
margin: 0 auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
line-height: 12px;
height: 40px;
width: 40px;
border-collapse: separate;
background: white;
}
.circle p{
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
我已经试过
我想多丑陋的东西:
- 的内容TD内部创建一个表。
结果:整个布局搞砸了 - 用div而不是固定表做了一切。
结果:布局切换工作,但圆圈&行不再工作。我认为,桌面布局更易于维护。 - 搜索使用Bootstrap包装表格单元,但只发现包装字符而不是整个
<td>
的s。
问题
你能帮助我达到我的目标,以包所有<td>
的相互底下?我没有想法。
您也可以向我展示解决方案的其他方式,我只有这些限制:
它必须使用Bootstrap完成,或者至少使用bootstrap。
布局必须如目标部分所示。我无法改变这个布局的一些东西。
我可以使用CSS3,如果没有JavaScript,我会很高兴;但如果只有可能,我也可以包含JS。
当它工作,这是很好的。感谢这个解决方案! –
@MichaelSchmidt欢迎您) –