我正在努力使我的桌子响应，但它没有发生。我不知道问题出在哪里。我正在使用bootstrap-responsive.css来实现它，但是当我在移动设备上打开时，该表并没有像其他页面一样中断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Untitled Document</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link type="text/css" href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="test/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap-combined.css" rel="stylesheet">
<link type="text/css" href="js/template.css" rel="stylesheet" />
<link href="test/flip-scroll.css" rel="stylesheet">
<style>
#tbl{
border: thin solid #eee;
}
#tbl td{
padding:5px;
border-bottom: thin solid #C4C4C4;
border-right:thin solid #eee;
}
#tbl tr:last-child td{
border-bottom:none;
}
#tbl td:last-child{
border-right:none;
}
#tbl tr:nth-child(odd){ background-color:#dafaf6; }
.heading{
color:#FFFFFF;
font-size:14px;
padding:10px;
text-align:center;
}
.clear
{
height:70px;
}
.current a
{
color:#FFF;
}
.divDemoBody {
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.divDemoBody p {
font-size: 18px;
line-height: 140%;
padding-top: 12px;
}
.divDialogElements input {
font-size: 18px;
padding: 3px;
height: 32px;
width: 500px;
}
.divButton {
padding-top: 12px;
}
</style>
</head>
<body>
<div style="width:100%; background-color:#1d719a; height:100px;">
<img src="nature/logo.png" style="margin:23px 0px 0px 30px;">
<div style="width:30%; float:right; text-align:right; margin-right:20px; margin-top:20px;">
<a href="clinic_dash_board.html" title="Home"><img src="images/home_icon.png" height="32" width="32"/></a>
<a href="cliniclog.html" title="Logout"><img src="images/logout.png" height="32" width="32" /></a>
</div>
</div>
<div class="row" style="margin-left:50px; margin-top:50px">
<div class="span12" align="center">
<form method="get" action="/" class="form-inline" >
<input name="q" class="span5" type="text" placeholder="Keywords:Name" >
<button type="submit" class="btn btn-small btn-primary">Search<i class="icon-search icon-white"></i></button>
</form>
</div>
</div>
<div class="container" style="margin-top:60px;">
<div class="row-fluid">
<div class="span12">
<legend style="font-family:Georgia, 'Times New Roman', Times, serif; font-style:italic; color:#06C;">Patient Details</legend>
<table align="right" style="margin-right:50px"><tr><td><div class="pagination"><ul><li class="active"><a>1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">»</a></li></ul></div></td></tr> </table>
<table cellpadding="0px" cellspacing="0px" border="0" style="width:90%" align="center">
<tr>
<td>
<section id="flip-scroll" style="margin-left:40px; width:100%">
<table class="table-bordered table-striped table-condensed cf" style="width:95%; ">
<thead style="background-color:#045c97;">
<tr>
<th class="heading">Patient Name</th>
<th class="heading">Date OF Birth</th>
<th class="heading" >Subject</th>
<th class="heading">Progress Note Date</th>
<th class="heading">Provider</th>
<th class="heading">Action</th>
</tr>
</thead>
<tbody style="font-size:12px;">
<tr>
<td><a href="clinic_edit.html">Shiv Acharya</a></td>
<td>06-03-1991</td>
<td>Suffering From high Fever</td>
<td>12-04-2013</td>
<td>SA</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="clinic_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="clinic_edit.html">Biswajeet Mahapatra</a></td>
<td>09-08-1991</td>
<td>Suffering From back pain</td>
<td>12-04-2013</td>
<td>BM</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="medical_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="clinic_edit.html">Praveen jena</a></td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="medical_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="clinic_edit.html">Sahil Sahoo</a></td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="medical_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="clinic_edit.html">Akash Pattnaik</a></td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="medical_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="clinic_edit.html">Sheetam kumar jena</a></td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="clinic_edit.html">Edit Demographics</a></li>
<li><a href="clinic_demo.html">New Encounter</a></li>
<li><a href="medical_history.html">View Past Notes</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clear"> </div>
</section>
<!-- <table cellspacing="0" cellpadding="2" border="0" id="tbl" style="width:100%">
<tr style="background-color:#045c97">
<td class="heading">Patient Name</td>
<td class="heading">Date OF Birth</td>
<td class="heading">Subject</td>
<td class="heading">Progress Note Date</td>
<td class="heading">Provider</td>
<td class="heading">Action</td>
</tr>
<tr style="text-align:center;">
<td>Shiv Acharya</td>
<td>06-03-1991</td>
<td>Suffering From high Fever</td>
<td>12-04-2013</td>
<td>SA</td>
<td>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Biswajeet Mahapatra</td>
<td>09-08-1991</td>
<td>Suffering From back pain</td>
<td>12-04-2013</td>
<td>BM</td>
<td><div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div></td>
</tr>
<tr style="text-align:center;">
<td>Praveen jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Sahil Sahoo</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Akash Pattnaik</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div>
</td>
</tr>
<tr style="text-align:center;">
<td>Sheetam kumar jena</td>
<td>06-03-1991</td>
<td>Suffering From heart attack</td>
<td>12-04-2013</td>
<td>SJ</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Edit Demographics</a></li>
<li><a href="#">New Encounter</a></li>
<li><a href="#">View Pastvotes</a></li>
</ul>
</div>
</td>
</tr>
</table>-->
</td>
</tr>
</table>
<table align="right" border="0">
<TR align="right">
<TD><form action="clinic_p.html">
<input type="submit" class="btn btn-success" value="Add Patient">
</form></TD></TR>
</table>
</div>
</div>
</div>
<div style="background-color:#1d719a; height:80px; margin-top:20px;">
<div style="width:40%; font:Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold; color:#FFF;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td style="height:20px;" colspan="2"> </td></tr>
<tr><td style="width:5%"> </td><td>Copyrights 2013. All Rights Reserved.</td></tr>
</table></div>
<div style="width:40%; float:right; text-align:right; margin:-40px 30px 0px 0px;font:Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold; color:#FFF;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td style="height:20px;" colspan="2"> </td></tr>
<tr><td style="width:5%"> </td><td>Monyter Technologies Pvt. Ltd.</td></tr>
</table>
</div>
</div>
</body>
</html>
任何解决方案都会很棒。
答案 0 :(得分：2)
用于制作响应表我通常使用另一种不是bootstrap的样式
<style>
#page-wrap {
margin: 50px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
<!--[if !IE]><!-->
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
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;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
</style>
<!--<![endif]-->
和html
<div id="page-wrap">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Favorite Color</th>
<th>Wars or Trek?</th>
<th>Porn Name</th>
<th>Date of Birth</th>
<th>Dream Vacation City</th>
<th>GPA</th>
<th>Arbitrary Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
<td>Lettuce Green</td>
<td>Trek</td>
<td>Digby Green</td>
<td>January 13, 1979</td>
<td>Gotham City</td>
<td>3.1</td>
<td>RBX-12</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
<td>Blue</td>
<td>Wars</td>
<td>John Smith</td>
<td>July 19, 1968</td>
<td>Athens</td>
<td>N/A</td>
<td>Edlund, Ben (July 1996).</td>
</tr>
<tr>
<td>Jokey</td>
<td>Smurf</td>
<td>Giving Exploding Presents</td>
<td>Smurflow</td>
<td>Smurf</td>
<td>Smurflane Smurfmutt</td>
<td>Smurfuary Smurfteenth, 1945</td>
<td>New Smurf City</td>
<td>4.Smurf</td>
<td>One</td>
</tr>
<tr>
<td>Cindy</td>
<td>Beyler</td>
<td>Sales Representative</td>
<td>Red</td>
<td>Wars</td>
<td>Lori Quivey</td>
<td>July 5, 1956</td>
<td>Paris</td>
<td>3.4</td>
<td>3451</td>
</tr>
<tr>
<td>Captain</td>
<td>Cool</td>
<td>Tree Crusher</td>
<td>Blue</td>
<td>Wars</td>
<td>Steve 42nd</td>
<td>December 13, 1982</td>
<td>Las Vegas</td>
<td>1.9</td>
<td>Under the couch</td>
</tr>
</tbody>
</table>
</div>
希望这对你有用
答案 1 :(得分：0)
您可能希望迁移到Bootstrap 3，因为它现在在某种程度上支持响应表：http://getbootstrap.com/css/#tables-responsive。
如果是这样，您应该在<div class="table-responsive">附近添加<table>。
同样http://bootply.com/bootstrap-3-migration-guide对迁移到Bootstrap 3非常有帮助。
答案 2 :(得分：0)
如果您使用的是基础，则可以使用http://zurb.com/playground/responsive-tables
但是，你不是......所以......
这不是我真正的理由，表，通常没有响应。它们确实发生了变化，但它们也具有最小宽度。在它们变得如此之小之后，它们就不会破裂。
但是，您可以更改响应表代码以使用引导程序。
这是一个完美的主题::