引导响应表 - 用列更改行 [英] Bootstrap responsive Table -> change Rows with Column
本文介绍了引导响应表 - 用列更改行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用Bootstrap为我的学校创建时间表时遇到问题。
时间表应该对移动设备和平板电脑有反应。
更大屏幕的视图效果很好，但当它切换到移动视图时，它会更改
平板视图：
主html文件：
@media only screen and max-width：800px）{/ *强制表不再像表一样* /＃no-more-tables表，＃no-more-tables thead，＃no-more-tables tbody，＃no-more- ，＃no-more-tables td，＃no-more-tables tr {display：block;} / *隐藏表头（但不显示：无，用于辅助功能）* /＃no-more-tables thead tr {position ：absolute; top：-9999px; left：-9999px;}＃no-more-tables tr {border：1px solid #ccc; }＃no-more-tables td {/ *像一个行* / border：none; border-bottom：1px solid #eee; position：relative; padding-left：50％; white-space：normal; text -align：left;}＃no-more-tables td：before {/ *现在像表头* / position：absolute; / *顶/左值mimic padding * / top：6px; left：6px; width：45 ％; padding-right：10px; white-space：nowrap; text-align：left; font-weight：bold;} / *标签数据* /＃no-more-tables td：before {content：attr（data-标题）; }}
<！DOCTYPE html>< html lang =en> < head> < meta charset =utf-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < meta name =viewportcontent =width = device-width，initial-scale = 1> < title>时间表< / title> < link href =css / bootstrap.min.css =stylesheet> < link href =js / bootstrap.js =stylesheet><！ - < link src =styles.css =stylesheet> - > < / head> < body> <！ - jQuery（Bootstrap的JavaScript插件所必需的） - > < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> <！ - 包含所有编译的插件（如下），或根据需要包含单独的文件 - > < script src =js / bootstrap.min.js>< / script> < link href =styles.css =stylesheet> < div class =container> < div class =row> < div class =col-md-12> < h2 class =text-center>时间表< / h2> < / div> < div id =no-more-tables> < table class =col-sm-12 table-bordered table-striped table-condensed cf> < thead class =cf> < tr> < th> < / th> < th>星期一< / th> < th>星期二< / th> < th>周三< / th> < th>星期四< / th> < th>星期五< / th> < / tr> < / thead> < tbody> < tr> < td data-title => 07：45 | 1 | 08：35< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 08：35 | 2 | 09：25< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 09：30 | 3 | 10：20< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 10：35 | 4 | 11：25< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 11：30 | 5 | 12：20< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 12：20 | 6 | 13：10< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 13：10 | 7 | 14：00< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 14：00 | 8 | 14：50< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 15：00 | 9 | 15：50" / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 15：55 | 10 | 16:45< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 16：50 | 11 | 17:40< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 17：40 | 12 | 18:30< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 18：55 | 13 | 19:40< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 19：40 | 14 | 20:25< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 20：30 | 15 | 21:15< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < tr> < td data-title => 21：15 | 16 | 22:00< / td> < td data-title =Monday>课程< / td> < td data-title =Tuesday>课程< / td> < td data-title =Wednesday>课程< / td> < td data-title =Thursday>课程< / td> < td data-title =Friday>课程< / td> < / tr> < / tbody> < / table> < / div> < / div>< / div> < / body>< / html>
，如何解决这个问题？
解决方案
替换HTML代码行
< div id =no-more-tables> code>
和
< table class = sm-12 table-bordered table-striped table-condensed cf< / code> with < table class =table col-sm-12 table-bordered table-striped table- condensed cf>
查看工作示例
I have a problem creating a timetable for my school using Bootstrap. The timetable should be responsive for mobile devices and tablets.
The view for larger screens works perfectly, but when it switches to the mobile View, it changes the rows with columns ..
Tabletview: http://imgur.com/U3ger2a,6ThcH1l
Mobileview: http://imgur.com/U3ger2a,6ThcH1l#1
The main html File:
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timetable</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="js/bootstrap.js" rel="stylesheet">
<!-- <link src="styles.css" rel="stylesheet"> -->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">
Timetable
</h2>
</div>
<div id="no-more-tables">
<table class="col-sm-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title=" ">07:45 |1| 08:35</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">08:35 |2| 09:25</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">09:30 |3| 10:20</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">10:35 |4| 11:25</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">11:30 |5| 12:20</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">12:20 |6| 13:10</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">13:10 |7| 14:00</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">14:00 |8| 14:50</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">15:00 |9| 15:50</td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">15:55 |10| 16:45 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">16:50 |11| 17:40 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">17:40 |12| 18:30 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">18:55 |13| 19:40 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">19:40 |14| 20:25 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">20:30 |15| 21:15 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
<tr>
<td data-title=" ">21:15 |16| 22:00 </td>
<td data-title="Monday">Lesson</td>
<td data-title="Tuesday">Lesson</td>
<td data-title="Wednesday">Lesson</td>
<td data-title="Thursday">Lesson</td>
<td data-title="Friday">Lesson</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Did anyone know, how to solve this problem?
解决方案
Replace your html code lines
<div id="no-more-tables"> with <div class="table-responsive">
and
<table class="col-sm-12 table-bordered table-striped table-condensed cf"> with <table class="table col-sm-12 table-bordered table-striped table-condensed cf">
See working example
这篇关于引导响应表 - 用列更改行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
