How to make a table responsive? - php

Question

Given below is my table which i wanna make responsive.
<table style="width:100%" class="table table-hover">
<tr>
<th>Booking Date</th>
<th>Booking Id</th>
<th>Amount</th>
<th>Movie Name</th>
<th>Theatre Name</th>
</tr>
<?php
foreach ( $data as $history )
{
?>
<tr>
<td> <?php print_r( $history->booking_date );?></td>
<td> <?php print_r( $history->booking_id ); ?></td>
<td> <?php print_r( $history->amount ); ?></td>
<?php $movie = Movies::find()->where( [ 'id' => $history->movie_id ] )->one(); ?>
<td><?php print_r( $movie->movie_name ); ?></td>
<?php $theatre = Theatres::find()->where( [ 'id' => $history->theatre_id ] )->one();?>
<td><?php print_r( $theatre->theatre_name ); ?></td>
</tr>
<?php
}
?>
</table>
class="table table-hover" was used so that when i hover over the rows i get a
different color. I changed it to class="table table-responsive" but even then
i found my table not responsive. What should i do to make it responsive?

Answer 1

<style type="text/css">
/*
Generic Styling, for Desktops/Laptops
*/
.table-hover {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
tr:hover {
background-color: lightyellow;
}
</style>
<table class="table table-hover">
<tr>
<th>Booking Date</th>
<th>Booking Id</th>
<th>Amount</th>
<th>Movie Name</th>
<th>Theatre Name</th>
</tr>
<?php
foreach ( $data as $history )
{
?>
<tr>
<td> <?php print_r( $history->booking_date );?></td>
<td> <?php print_r( $history->booking_id ); ?></td>
<td> <?php print_r( $history->amount ); ?></td>
<?php $movie = Movies::find()->where( [ 'id' => $history->movie_id ] )->one(); ?>
<td><?php print_r( $movie->movie_name ); ?></td>
<?php $theatre = Theatres::find()->where( [ 'id' => $history->theatre_id ] )->one();?>
<td><?php print_r( $theatre->theatre_name ); ?></td>
</tr>
<?php
}
?>
</table>
try this one
source: https://css-tricks.com/responsive-data-tables/