1. 首页
  2. 问答
  3. 不能正常工作？

不能正常工作？

2013-10-11 51 views
0

我想让我的表响应但它没有发生。我不知道问题在哪里。我使用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="">&raquo;</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">&nbsp;</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">&nbsp;</td></tr>  
<tr><td style="width:5%">&nbsp;</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">&nbsp;</td></tr>  
<tr><td style="width:5%">&nbsp;</td><td>Monyter Technologies Pvt. Ltd.</td></tr>  
</table>  
</div>  
</div>          

</body>  
</html>

任何解决方案将是伟大的。

来源

2013-10-11 user2775200

+0

它似乎是在代码的实际患者数据，这可能不是在网上留言合适。 –

回答

0

如果你使用基金会和灰，你可以使用http://zurb.com/playground/responsive-tables

但是，你不是...所以...

没有我这里真正的原因是说，表格，一般都没有响应。他们确实有所改变，但他们也有一个最小宽度。他们变得如此之小以后，他们就不会突破。

也许虽然你可以改变响应表代码来使用bootstrap。

这是一个完美的主题为你::

How to display tables on mobile using Bootstrap?

来源

2013-10-11 13:52:16

2

作出响应表我通常使用的另一种风格不是引导

<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>

希望这将为你工作

来源

2013-10-11 13:47:54

相关问题

 相关问题