2017-02-21 45 views
1

3 таблица уже поместилась в ландшафтном режиме, но столбец theres, который не выглядит хорошо, как колонка 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 КОД

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


} 

ЗДЕСЬ РЕЗУЛЬТАТ PIC enter image description here

+0

добавить jsfiddle или какой-либо онлайн-компилятор вашего кода .. –

ответ

0

У вас есть два варианта для этого.

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