Question

：定位
我有一张水平的桌子。我创建了一个桌面视图和一个移动视图。在移动视图中，所有信息都显示在桌面上的其他位置下，每个信息都显示在彼此旁边这应该是这样的：
桌面
移动

我目前的状态
我使用Bootstrap。我做了一个表格布局，它看起来应该如何在桌面上。如果我将其调整为移动设备，则信息将不会在彼此之下包裹，而是像桌面视图一样保持水平：

Codepen-Demo of current solution
来自Codepen的代码（注意，我使用Bootstrap，所以我不认为SO生成的视图是合适的）：
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;
}

我尝试了什么
我尝试了多种难看的东西：

在 content-TD 中创建另一个表结果：整个布局搞砸了
用div而不是固定的桌子制作所有东西结果：布局开关工作正常，但圆圈和线路不再起作用了。我认为，表格布局更易于维护。
搜索了使用Bootstrap包装表格单元格，但发现只有自动换行而不是整个<td>。

问题
你能帮助我达到我的目标，以便将所有<td>包裹在彼此之下吗？我没有想法您还可以向我展示解决方案的其他方法，我只有这些限制：
必须使用Bootstrap或至少使用bootstrap 布局必须与 Target -section中显示的一样。我无法改变这种布局。

我可以使用CSS3，如果没有JavaScript，我会很高兴;但如果只有可能，我也可以包括JS。

Answer 1

可能它不是问题的最佳解决方案，但在我看来，它将通过最少的代码更改和仅使用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>

使用bootstrap

1 个答案: