Question

我正在尝试设置 th 宽度，但它只更改桌面视图。如果我在移动表中打开该页面未正确设置。我也尝试使用col-xs-2来修复 th ，但它不起作用

<div class="form-group col-lg-12 col-md-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-xs-12 col-md-offset-1">
                            <div class="row" >
                                        <div class = "table-responsive">
                                            <table class="table table-hover table-striped">
                                                <thead>
                                                    <tr class="info">
                                                        <th class="col-md-2 col-xs-2" > No</th>
                                                        <th class="col-md-4 col-xs-4">Dish Name</th>
                                                        <th class="col-md-2 col-xs-2"> Size</th>
                                                        <th class="col-md-2 col-xs-2">Prize</th>
                                                        <th class="col-md-2 col-xs-2">Order</th>
                                                    </tr>
                                                </thead>
                                <tbody>
                                    <tr title="Order Chicken Kadhai">
                                        <td >1</td>
                                        <td >Chicken Kadhai</td>
                                        <td >Full</td>
                                        <td >150/-</td>
                                        <td ><input type="button" class="btn btn-info" value="ORDER"> </td>
                                    </tr>
                                    <tr>    
                                        <td >2</td>
                                        <td >Chicken Roast</td>
                                        <td >Full</td>
                                        <td >250/-</td>
                                        <td ><input type="button" class="btn btn-info" value="ORDER"> </td>
                                    </tr>
                                    <tr>

                                        <td >3</td>
                                        <td >Chicken Tandori</td>
                                        <td >Full</td>
                                        <td >350/-</td>
                                        <td ><input type="button" class="btn btn-info" value="ORDER"> </td>
                                    </tr> 
                                </tbody>
                            </table>  
                          </div>                                            
                                    </div>
                                </div>
                            </div>

如何将 th 设置为响应表

Answer 1

来自评论：

不会在表中使用
列。 .table-responsive调整本身根据内容。

Answer 2

使用此代码可能对您有所帮助

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Answer 3

写<class=".table-responsive>"而不是class = <class="table-responsive>"

表内容如何在bootsrap中重新响应

3 个答案: