Bootstrap 响应表 ->用列更改行 [英] Bootstrap responsive Table -> change Rows with Column
本文介绍了Bootstrap 响应表 ->用列更改行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用 Bootstrap 为我的学校创建时间表时遇到问题.时间表应针对移动设备和平板电脑做出响应.
大屏幕的视图工作得很好，但是当它切换到移动视图时，它会改变行与列..
平板浏览:
主要的html文件:
@media only screen and (max-width: 800px) {/* 强制表不再像表 */#no-more-tables 表，#no-more-tables thead，#no-more-tables tbody，#no-more-tables th,#no-more-tables td，#no-more-tables tr {显示:块；}/* 隐藏表头(但不显示:无；为了可访问性)*/#no-more-tables thead tr {位置:绝对；顶部:-9999px；左:-9999px；}#no-more-tables tr { 边框:1px 实心 #ccc;}#no-more-tables td {/* 表现得像一个行" */边界:无；边框底部:1px 实心#eee；位置:相对；填充左:50%；空白:正常；文本对齐:左；}#no-more-tables td:before {/* 现在就像一个表头 */位置:绝对；/* 顶部/左侧值模拟填充 */顶部:6px；左:6px；宽度:45%；padding-right: 10px;空白:nowrap；文本对齐:左；字体粗细:粗体；}/*标记数据*/#no-more-tables td:before { content: attr(data-title);}}<html lang="zh-cn"><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>时间表</title><link href="css/bootstrap.min.css" rel="样式表"><link href="js/bootstrap.js" rel="样式表"><!-- <link src="styles.css" rel="stylesheet">--><身体><!-- 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" rel="stylesheet"><div class="容器"><div class="row"><div class="col-md-12"><h2 class="text-center">时间表<div id="no-more-tables"><table class="col-sm-12 table-bordered table-striped table-condensed cf"><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead>
<tr><td data-title="">07:45 |1|08:35<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">08:35 |2|09:25<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">09:30 |3|10:20<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">10:35 |4|11:25<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">11:30 |5|12:20<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">12:20 |6|13:10<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">13:10 |7|14:00<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">14:00 |8|14:50<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</td><td data-title="Friday">课程</td></tr><tr><td data-title="">15:00 |9|15:50<td data-title="Monday">课程</td><td data-title="Tuesday">课程</td><td data-title="Wednesday">课程</td><td data-title="星期四">课程</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="星期四">课程</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="星期四">课程</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="星期四">课程</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="星期四">课程</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="星期四">课程</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="星期四">课程</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="星期四">课程</td><td data-title="Friday">课程</td></tr></tbody>