在css中创建响应表
在css中创建响应表
提问于 2018-06-03 14:19:15
我有一个表格结构(没有th的表)，如下所示：
-1-2
-3-4
我希望它就像是移动屏幕一样：
-1--
-2--
-3
-4
无论我做什么，我都不能设计它。我的建议代码是：
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>总会有结果
1
2
3.
4.
如果没有显示块，结果总是会出现
-1-2
-3-4
回答 2
Stack Overflow用户
发布于 2018-06-03 14:40:44
如果使用bootstrap col-xs-12，则必须设置col-xs12 -**)**而不是 (add
请参阅JSFiddle:https://jsfiddle.net/v09bzj89/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs-12 col-sm-6 ">1</td>
<td class="col-xs-12 col-sm-6 ">2</td>
</tr>
<tr class="row">
<td class="col-xs-12 col-sm-6">3</td>
<td class="col-xs-12 col-sm-6">4</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2018-06-03 14:24:09
使用媒体查询并仅在该块中添加display: block样式，以便它仅应用于特定分辨率。
// This style will be applied only below screen widths 600px
@media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
</style>
</head>
<body>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50663791
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号