テーブルの中に水平スクロールを作成するには？

Question

私はデータベースからデータを取得してテーブルに入れるテーブルを作成しました。私はデータベースに期間である列を持っています。たとえば、durationは10です。週の数はweek1、week2、week3などです。今、私は週の水平スクロールをしたいです。だから、どうしたらいいですか？どうか私を助けてください。

コード：

<table class="table table-bordered"> 
     <thead> 
      <th>A1</th> 
      <th>A2</th> 
      <th>A3</th> 
      <th>A4</th> 
      <?php 
       foreach ($prop as $row) 
       { 
        $duration = $row['duration']; 
        for($i=1; $i<=$duration; $i++) 
        { 
         echo "<th>week".$i."</th>"; 
        } 
       } 
      ?> 
      <th>A5</th> 
      <th>Total</th> 
     </thead> 
     <tbody> 
      <?php 
       foreach ($prop as $row) 
       { 
        $duration = $row['duration']; 
        $role = explode(",", $row['role']); 
        foreach ($role as $key) 
        { 
         $this->db->select('*'); 
         $this->db->from('designation_master'); 
         $where = "id = '".$key."'"; 
         $this->db->where($where); 
         $sql = $this->db->get(); 
         $res = $sql->result_array(); 
         foreach ($res as $rows) 
         { 
          $rol = $rows['designation_name']; 
         } 
      ?> 
         <tr> 
          <td id="s-some"><?php echo $rol; ?></td> 
          <td id="s-some"></td> 
          <td id="s-some"></td> 
          <td id="s-some"></td> 
          <?php 
           $duration = $row['duration']; 
           for($i=1; $i<=$duration; $i++) 
           { 
            echo "<td> 
              <input type='text' name='a' id='a".$i."' style='width: 40px;'/> 
              </td>"; 
           } 
          ?> 
          <td id="s-some"></td> 
          <td id="s-some"></td> 
         </tr> 
      <?php   
        } 
       } 
      ?> 
     </tbody> 
    </table> 

が

Answer 1

あなたはあなたのテーブルのためのホルダーを作ることができますありがとうございました。あなたのテーブルを置く。

オーバーフローを使用して、テーブルをホルダーの中に置きます。以下のコードを参照して確認することができます。

.table-box{ 
 
    max-width: 100px; 
 
    overflow-x: scroll; 
 
} 
 

 
.table-holder{ 
 
    overflow: hidden; 
 
} 
 

 

 
/* Not important -> table styling */ 
 
table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
}

<div class="table-holder"> 
 
<div class="table-box"> 
 
<table > 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 
</div> 
 
</div>