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>

どんな解決策も素晴らしいでしょう。

4

3 に答える 3

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-11T13:47:54.567 に答える
0

レスポンシブ テーブルをある程度サポートするようになったため、Bootstrap 3 に移行することをお勧めします: http://getbootstrap.com/css/#tables-responsive。

<div class="table-responsive">もしそうなら、あなたの周りにa を追加することでうまくいくはずです<table>。

また、http://bootply.com/bootstrap-3-migration-guideは、Bootstrap 3 への移行に非常に役立ちます。

于 2013-10-11T05:43:57.987 に答える
0

ファンデーションを使用している場合は、http://zurb.com/playground/responsive-tablesを使用できます

しかし、あなたはそうではありません...だから...

ここでの私の本当の理由は、通常、テーブルは応答しないと言うことです。それらはある程度変化しますが、最小幅もあります。彼らがとても小さくなった後、彼らは壊れません。

ただし、レスポンシブ テーブル コードを変更して、ブートストラップで動作するようにすることもできます。

ここにあなたにぴったりのスレッドがあります::

Bootstrapを使用してモバイルでテーブルを表示するには?

于 2013-10-11T13:52:16.170 に答える