如何使表格响应？答案

【问题标题】：How to make a table responsive?如何使表格响应？
【发布时间】：2015-10-17 09:39:47
【问题描述】：

下面是我想要做出响应的表格。

 <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" 被使用，所以当我将鼠标悬停在行上时，我得到一个不同的颜色。我将其更改为 class="table table-responsive" 但即便如此我发现我的桌子没有反应。我应该怎么做才能让它响应？

【问题讨论】：

一个 jquery 围兜？对我来说很好。 zurb.com/playground/responsive-tables
stackoverflow.com/questions/18436864/…的可能重复
你在使用任何前端框架吗？你的 CSS 是什么？
是的，我正在使用 Yii2 框架。
你期望table-responsive 让它响应？您是否定义了任何适用于它的 CSS 或 JS？无论如何，您所说的“响应式”是什么意思？它的意思是“适应窗口大小”，但有很多方法可以做到这一点，所以它本身就像“让它变好”一样提供信息。

标签： php html responsive-design

【解决方案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>

试试这个

来源：https://css-tricks.com/responsive-data-tables/

【讨论】：