1. ホーム
  2. 質問と答え
  3. 携帯電話のランドスケープモードで3つのテーブルを合わせるにはどうすればいいですか？

携帯電話のランドスケープモードで3つのテーブルを合わせるにはどうすればいいですか？

2017-02-21 10 views
1

3つのテーブルはすでに横長モードに収まっていますが、JAM列のようには見えません。どのように私はこの問題を解決することができますか？ 私はすでにレスポンシブテーブルをブートストラップから使用しています。ここで 携帯電話のランドスケープモードで3つのテーブルを合わせるにはどうすればいいですか？

はこちらHTMLコード 

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

あるCSSのCODE HERE

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


}

結果PIC enter image description here

出典

2017-02-21 Josh Parinussa

+0

jsfiddleまたはコードのオンラインコンパイラを追加します。 –

答えて

0

あなたは、このための2つのオプションがありますがです。

1.テーブルを以下のように反応させますが、同じ画面に水平スクロールが追加されます。

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

2.あなたはそれが良く見えるように小さな画面のデバイス上でのフォントサイズとパディング/マージンを調整することができます。

@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; 
    } 
}

出典

2017-02-21 07:45:02 Ahmar

関連する問題

 関連する問題