php - 如何在表格内创建水平滚动？

Question

我创建了一个表，我从数据库中检索数据并将其放入表中。我的数据库中有一列是持续时间。例如，持续时间为 10，因此，周数在表格格式中为第 1 周、第 2 周、第 3 周等。现在，我想给出几周的水平滚动条。那么，我该怎么做呢？请帮助我。

代码:

<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 制作一个支架。把你的 table 放在里面。

使用 overflow 并将 table 放在支架内。您可以查看下面的代码以供引用。

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