2016-09-21 44 views
1

目标
我有一个水平表。我创建了一个桌面视图和一个移动视图。在移动视图中,所有信息均在桌面上显示在eatch下,每个信息都显示在彼此旁边。
这是应该的样子:
桌面 Desktop
移动
Mobile总结多个​​的移动与自举

我现在的状态
我与引导工作。我做了一个表格布局,看起来应该如何在桌面上。如果我把它调整到移动,该信息将不包互相下方,但在桌面视图停留水平,如:
Reality

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。

回答

2

也许这不是问题的最佳解决方案,但在我看来,它会在代码中尽可能少地改变并且只使用Bootstrap的类来解决问题。

.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; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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-9"> 
 
     <div class="col-sm-4"> 
 
     <strong>Drive</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">Home - Stop</div> 
 
    </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-9"> 
 
     <div class="col-sm-4"> 
 
     <small>Inbetween</small><br /> 
 
     <strong>Snack</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">Stop</div> 
 
    </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-9"> 
 
     <div class="col-sm-4"> 
 
     <strong>Drive</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">HStop - End</div> 
 
    </td> 
 
    </tr> 
 

 
</table>

+0

当它工作,这是很好的。感谢这个解决方案! –

+0

@MichaelSchmidt欢迎您) –