Html Bootstrap 响应式表 -> 用列更改行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28046506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:23:04 来源:igfitidea点击:
Bootstrap responsive Table -> change Rows with Column
提问by Ferdinand Brunauer
I have a problem creating a timetable for my school using Bootstrap. The timetable should be responsive for mobile devices and tablets.
我在使用 Bootstrap 为我的学校创建时间表时遇到问题。时间表应响应移动设备和平板电脑。
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
平板视图：http://imgur.com/U3ger2a,6ThcH1l
Mobileview: http://imgur.com/U3ger2a,6ThcH1l#1
手机浏览：http: //imgur.com/U3ger2a,6ThcH1l#1
The main html File:
主要的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>Did anyone know, how to solve this problem?
有谁知道，如何解决这个问题？
回答by Neha
Replace your html code lines
替换你的 html 代码行
<div id="no-more-tables">with <div class="table-responsive">
<div id="no-more-tables">和 <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">
<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">
See working example
查看工作示例
