我有一张这样的表:
+----+----+----+----+----+----+
| A | A | B | B | C | C |
+----+----+----+----+----+----+
我需要在小屏幕上获得此结果
+----+----+
| A | A |
+----+----+
| B | B |
+----+----+
| C | C |
+----+----+
有可能吗?
我想只使用css,没有jquery。 使用display:property,td :: after 我应该怎么做 ? 我该如何解决这个问题?
@media( max-width:640px) {
#test, #test thead, #test tbody {} #test tr {
/* ? */
}
#test th {
/* ? */
}
#test td {
/* ? */
}
#test td::after {
/* ? */
}
#test tr {
border-bottom: 1px solid #ddd;
}
#test th,
#test td {
border-top: none;
border-bottom: none;
}
}
<table id="test" class="table">
<tr>
<th>A</th>
<td>A</td>
<th>B</th>
<td>B</td>
<th>C</th>
<td>C</td>
</tr>
<tr>
<th>D</th>
<td>D</td>
<th>E</th>
<td>E</td>
<th>F</th>
<td>F</td>
</tr>
</table>
答案 0 :(得分:3)
<table>
和@media
不是最好的朋友
如果我们愿意,<div>
可以同时为display: block;
和display: table;
,所以让我们摇滚
<强> jsBin demo 强>
*{box-sizing:border-box;-webkit-box-sizing:border-box;}html,body{height:100%;margin:0;}
.table{
display: table;
width: 100%;
table-layout: fixed;
border-left: 1px solid #444;
border-top: 1px solid #444;
}
.tr{
display: table-row;
}
.td,
.th{
display: table-cell;
background: #eee;
border-bottom: 1px solid #444;
border-right: 1px solid #444;
}
.th{
font-weight: bold;
}
@media(max-width:640px) {
.table,
.tr{
display: block;
}
.th,
.td{
width: 50%;
float: left;
}
}
&#13;
<div class="table">
<div class="tr">
<div class="th">A</div>
<div class="td">A</div>
<div class="th">B</div>
<div class="td">B</div>
<div class="th">C</div>
<div class="td">C</div>
</div>
<div class="tr">
<div class="th">D</div>
<div class="td">D</div>
<div class="th">E</div>
<div class="td">E</div>
<div class="th">F</div>
<div class="td">F</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
这是使用bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-4 col-xs-12 text-center">
<div class="col-md-2 col-xs-6">A</div>
<div class="col-md-2 col-xs-6">A</div>
</div>
<div class="col-md-4 col-xs-12 text-center">
<div class="col-md-2 col-xs-6">B</div>
<div class="col-md-2 col-xs-6">B</div>
</div>
<div class="col-md-4 col-xs-12 text-center">
<div class="col-md-2 col-xs-6">C</div>
<div class="col-md-2 col-xs-6">C</div>
</div>
</div>
最好使用<div>
而不是使用旧的<table>
。使用像bootstrap这样的框架,样式会更容易。