1
我有一个特定的表格,其中当调整浏览器大小时,其中两列切换位置。在调整浏览器大小时切换位置的HTML表格单元格
这是它的外观正常(注意域 “ID Vendedor” 和 “农布雷”):
,这是它的外观调整大小时:
但是,这只发生在这个特定的表中,其他表正常工作。
这是HTML和CSS表:
@media (max-width: 768px) {
table.resp-table {
border: 0;
}
table.resp-table thead {
display: none;
}
table.resp-table tr {
border-top: 2px solid #222;
margin-bottom: 10px;
display: block;
}
table.resp-table td {
display: block;
text-align: right;
font-size: 13px;
position: static;
}
table.resp-table td:last-child {
border-bottom: 0;
}
table.resp-table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<div class="col-xs-12 pt-60-on-xs" ng-hide="addingVendedor || editingVendedor">
<p class="lead text-warning text-center" ng-if="!vendedores.length">No hay Vendedores en Base de Datos</p>
<table class="table resp-table" ng-if="vendedores.length">
<thead>
<tr>
<th>ID Vendedor</th>
<th>Nombre</th>
<th>Distribuidor</th>
<th>Cargo</th>
<th>Código</th>
<th>Fecha Registro</th>
<th>Editar/Borrar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vendedor in vendedores | filter:filter.vendedor">
<td data-label="Nombre">{{vendedor.id_vendedor}}</td>
<td data-label="ID Vendedor">{{vendedor.nombre}}</td>
<td data-label="Distribuidor"><span>{{vendedor.distribuidor.nombre}}</span> <strong>({{vendedor.distribuidor.id_distribuidor}})</strong>
</td>
<td data-label="Cargo">{{vendedor.cargo}}</td>
<td data-label="Código">{{vendedor.codigo || "N/A"}}</td>
<td data-label="Fecha Registro">{{vendedor.createdAt | date:'dd/MM/yy hh:mm:ss a'}}</td>
<td data-label="Editar/Borrar">
<button class="btn btn-warning" ng-click="setEditVendedor(vendedor)"><span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-danger" ng-click="deleteVendedor(vendedor)"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
我试图寻找一个解决方案,这一点,但我没有发现任何东西。我希望你至少能指出我正确的方向来解决这个问题。
你的''没有孩子''。 –
connexo
A
2
+1
回答
当您切换到移动视图时,使用伪元素生成标题,该伪元素查找元素上的
data-label
属性的内容;尤其是CSS的块:的问题是
data-label
属性是南辕北辙的HTML,围绕交换他们和航向是正确的:应该是:
来源
2016-12-03 19:16:48
你的''没有孩子''。 –
connexo
+0
+0
相关问题
-
1. 表单元格时,浏览器调整大小
-
2. 更改浏览器位置的HTML元素调整大小
-
3. 浏览器调整大小的位置元素绝对位移
-
4. jqplot在调整浏览器大小时调整大小图表
-
5. 在调整浏览器窗口大小时调整网格大小
-
6. 将html元素大小调整为最大浏览器大小
-
7. 调整浏览器大小时的css位置
-
8. HTML表格:如何在已指定“colspan”时调整数据单元格大小?
-
9. 浏览器调整大小时调整jqGrid的大小?
-
10. 如何在调整浏览器大小时停止调整大小元素
-
11. 调整浏览器大小
-
12. 在libgdx的表格单元格中调整图像大小
-
13. 设计一个在调整浏览器大小时收缩的表格
-
14. 如何根据浏览器窗口大小动态调整html表格
-
15. 在窗口调整大小检测表格单元格冲突
-
16. 在调整浏览器大小时CSS3菜单下拉菜单
-
17. 图像div在调整浏览器大小时发生位移
-
18. 位置固定的浏览器调整大小
-
19. 自动调整表格中的单元格大小
-
20. 如何使用jquery调整表格单元格的大小?
-
21. 在datagridview的单元格中调整位图图像大小
-
22. 在IE浏览器调整大小与文档大小调整
-
23. 如何在浏览器调整大小时防止图像在网格内调整大小
-
24. UICollectionView单元格大小调整
-
25. HTML&CSS创建的网页不应该在更改浏览器大小时更改/调整元素的位置
-
26. 如何在调整浏览器窗口大小的同时让我的HTML表保持在同一个位置?
-
27. 如何在浏览器调整大小时调整java applet的大小?
-
28. 背景图像自动调整大小表格单元格
-
29. 如何调整表格单元格大小?
-
30. 浏览器重新调整图像网格大小?
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新问题
-
1. 如何更新卡片视图布局点击它时?
-
2. 如何在ns3中实现GPSR算法?
-
3. MVC/Entity Framework编辑动作
-
4. PL/SQL:如何将行组合成一个字符串
-
5. 如何在Google端点响应中发送自定义标头
-
6. html_entity_decode的POST/GET值
-
7. 需要得到字符串月作为int
-
8. 我如何绕过负载均衡器
-
9. SQL用户验证列
-
10. QR阅读器在iphone/ipad
-
1. 表单元格时,浏览器调整大小
-
2. 更改浏览器位置的HTML元素调整大小
-
3. 浏览器调整大小的位置元素绝对位移
-
4. jqplot在调整浏览器大小时调整大小图表
-
5. 在调整浏览器窗口大小时调整网格大小
-
6. 将html元素大小调整为最大浏览器大小
-
7. 调整浏览器大小时的css位置
-
8. HTML表格:如何在已指定“colspan”时调整数据单元格大小?
-
9. 浏览器调整大小时调整jqGrid的大小?
-
10. 如何在调整浏览器大小时停止调整大小元素
好点@connexo,例子更新了。 –
非常感谢!我因缺少这些细节而感到哑巴,我仍然是一个小菜鸟,我正在努力学习网络开发。 –
相关问题