Bootstrap 响应式表 -> 用列更改行
Posted
技术标签:
【中文标题】Bootstrap 响应式表 -> 用列更改行【英文标题】:Bootstrap responsive Table -> change Rows with Column 【发布时间】:2015-03-18 17:59:48 【问题描述】:我在使用 Bootstrap 为我的学校创建时间表时遇到问题。 时间表应能适应移动设备和平板电脑。
大屏幕的视图完美运行,但是当它切换到移动视图时,它会改变行与列..
平板电脑:http://imgur.com/U3ger2a,6ThcH1l
Mobileview:http://imgur.com/U3ger2a,6ThcH1l#1
主html文件:
@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>
有谁知道,如何解决这个问题?
【问题讨论】:
【参考方案1】:替换你的html代码行
<div id="no-more-tables">
与 <div class="table-responsive">
和
<table class="col-sm-12 table-bordered table-striped table-condensed cf">
与 <table class="table col-sm-12 table-bordered table-striped table-condensed cf">
查看工作example
【讨论】:
这种方法适用于宽度小的数据,如果文本很大,它会超出列。以上是关于Bootstrap 响应式表 -> 用列更改行的主要内容,如果未能解决你的问题,请参考以下文章
使用 Reactstrap 响应式表的带有固定标题的可滚动表
css 更改导航栏响应断点。来自https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
css 更改导航栏响应断点。来自https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint