How to create horizontal scroller inside table? - php

Question

I have create a table where I have retrieve data from database and put into table. I have a column in my database which is duration. for example duration is 10 so, number of weeks are week1,week2,week3 and so on in the table format. Now, I want to give horizontal scroller of weeks. So, How can I do this ?Please help me.
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>
Thank You

Answer 1

You can make a holder for your table. and place your table inside.
Use overflow and place the table inside an holder. You can check the code below for reference.
.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>