Wie erstellt man horizontale Scroller in der Tabelle?

Question

Ich habe eine Tabelle erstellt, wo ich Daten aus der Datenbank abrufen und in die Tabelle legen. Ich habe eine Spalte in meiner Datenbank, die Dauer ist. Zum Beispiel ist die Dauer 10, also die Anzahl der Wochen sind Woche1, Woche2, Woche3 und so weiter im Tabellenformat. Jetzt möchte ich horizontalen Scroller von Wochen geben. Also, wie kann ich das tun? Bitte helfen Sie mir.

Code:

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

Danke

Answer 1

Sie können einen Halter für Ihren Tisch machen. und lege deinen Tisch hinein.

Verwenden Sie den Überlauf und legen Sie den Tisch in einen Halter. Sie können den folgenden Code als Referenz überprüfen.

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