1. Zuhause
  2. Frage und Antwort
  3. Wie 3 Tabelle im Querformat in Handy passen?

Wie 3 Tabelle im Querformat in Handy passen?

2017-02-21 2 views
1

Die 3 Tabelle passt schon in den Querformat-Modus, aber die Spalte sieht nicht gut aus, wie die JAM-Spalte. Wie kann ich dieses Problem beheben? Ich benutze bereits reaktive Tabelle von Bootstrap. HierWie 3 Tabelle im Querformat in Handy passen?

ist der HTML-Code

<html> 
<head> 
<style> 


</style> 

    <title>Table Grid Responsive</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <link href="style.css" rel="stylesheet"> 
    <!-- <link href="styles-mediaquery-reporter.css" rel="stylesheet"> --> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 

</head> 
<body> 


    <hgroup> 
      <h1>Table Media Queries &amp; Responsive Grid</small></h1> 
      <h2>Quick-Tip &raquo; with a Little CSS3 MediaQuery-Reporter</h2> 
    </hgroup> 
     <div class="span-one-third"> 
      <div class="table-responsive"> 
      <table border = '1' class="table table-bordered table-striped table-hover lebarTabel"> 
       <th colspan = '3' class="text-center">SHIFT PAGI</th> 
       <tr> 
        <td class="text-center j_a">JAM</td> 
        <td class="text-center g_i" >GIL/<br>JAM</td> 
        <td class="text-center s_d">S/D</td> 

       </tr> 
       <tr> 
        <td>06-07</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(6) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(6) ?></td> 
       </tr> 
       <tr> 
        <td>07-08</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(7) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(7) ?></td> 
       </tr> 
       <tr> 
        <td>08-09</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(8) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(8) ?></td> 
       </tr> 
       <tr> 
        <td>09-10</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(9) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(9) ?></td> 
       </tr> 
       <tr> 
        <td>10-11</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(10) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(10) ?></td> 
       </tr> 
       <tr> 
        <td>11-12</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(11) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(11) ?></td> 
       </tr> 
       <tr> 
        <td>12-13</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(12) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(12) ?></td> 
       </tr> 
       <tr> 
        <td>13-14</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(13) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(13) ?></td> 
       </tr> 

      </table> 
      </div> 
     </div> 
     <div class="span-one-third"> 
      <div class="table-responsive"> 
      <table border = '5' class="table table-bordered table-striped table-hover lebarTabel"> 
       <th colspan = '3' class="text-center">SHIFT SIANG</th> 
       <tr> 
        <td class="text-center j_a">JAM</td> 
        <td class="text-center g_i">GIL/<br>JAM</td> 
        <td class="text-center s_d">S/D</td> 

       </tr> 
       <tr> 
        <td>14-15</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(14) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(14) ?></td> 
       </tr> 
       <tr> 
        <td>15-16</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(15) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(15) ?></td> 
       </tr> 
       <tr> 
        <td>16-17</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(16) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(16) ?></td> 
       </tr> 
       <tr> 
        <td>17-18</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(17) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(17) ?></td> 
       </tr> 
       <tr> 
        <td>18-19</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(18) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(18) ?></td> 
       </tr> 
       <tr> 
        <td>19-20</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(19) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(19) ?></td> 
       </tr> 
       <tr> 
        <td>20-21</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(20) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(20) ?></td> 
       </tr> 
       <tr> 
        <td>21-22</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(21) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(21) ?></td> 
       </tr> 

      </table> 
      </div> 
     </div> 
     <div class="span-one-third"> 
      <div class="table-responsive"> 
      <table border = '5' class="table table-bordered table-striped table-hover lebarTabel"> 
       <th colspan = '3' class="text-center">SHIFT MALAM</th> 
       <tr> 
        <td class="text-center j_a">JAM</td> 
        <td class="text-center g_i">GIL/<br>JAM</td> 
        <td class="text-center s_d">S/D</td> 

       </tr> 
       <tr> 
        <td>22-23</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(22) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(22) ?></td> 
       </tr> 
       <tr> 
        <td>23-00</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(23) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(23) ?></td> 
       </tr> 
       <tr> 
        <td>00-01</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(0) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(0) ?></td> 
       </tr> 
       <tr> 
        <td>01-02</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(1) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(1) ?></td> 
       </tr> 
       <tr> 
        <td>02-03</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(2) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(2) ?></td> 
       </tr> 
       <tr> 
        <td>03-04</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(3) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(3) ?></td> 
       </tr> 
       <tr> 
        <td>04-05</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(4) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(4) ?></td> 
       </tr> 
       <tr> 
        <td>05-06</td> 
        <td id="dari" align="center" class="gil"><?php echo $obj->tampil_hasil(5) ?></td> 
        <td id="sd" align="center" class="sd"><?php echo $obj->tampil_sd(5) ?></td> 
       </tr> 

      </table> 
      </div> 
     </div> 

</body> 

</html>

Dies ist die CSS-Code

@media all and (orientation:landscape){ 
    .span-one-third { 
     width: 33.333%; 
     float: left; 
     /*display:inline-block*/ 
    } 


}

Hier ist das Ergebnis PIC enter image description here

Quelle

2017-02-21 Josh Parinussa

+0

Fügen Sie jsfiddle oder einen Online-Compiler Ihres Codes hinzu. –

Antwort

0

Sie haben zwei Möglichkeiten.

1. Erstellen Sie eine Tabelle wie unten beschrieben, aber es wird horizontales Scrollen auf denselben Bildschirmen hinzugefügt.

<div class="table-responsive"> 
 
     <table class="table"> 
 
     ... 
 
     </table> 
 
</div>

2. Sie können Schriftgröße und padding/margin auf Geräte mit kleinem Bildschirm anpassen, um es besser aussehen zu lassen.

@media (max-width: 767px) { 
    .table thead > tr > th, 
    .table tbody > tr > th, 
    .table tfoot > tr > th, 
    .table thead > tr > td, 
    .table tbody > tr > td, 
    .table tfoot > tr > td { 
     padding: 1px; 
     font-size: 6px; 
    } 
} 

@media (min-width: 768px) { 

    .table thead > tr > th, 
    .table tbody > tr > th, 
    .table tfoot > tr > th, 
    .table thead > tr > td, 
    .table tbody > tr > td, 
    .table tfoot > tr > td { 
     padding: 2px; 
     font-size: 8px; 
    } 
} 

@media (min-width: 992px) { 
    .table thead > tr > th, 
    .table tbody > tr > th, 
    .table tfoot > tr > th, 
    .table thead > tr > td, 
    .table tbody > tr > td, 
    .table tfoot > tr > td { 
     padding: 3px; 
     font-size: 12px; 
    } 
}

Quelle

2017-02-21 07:45:02 Ahmar

Verwandte Themen

 Verwandte Themen