javascript - 由于 bootstrap css，响应表无法正确折叠

Question

我正在尝试使我的表格具有响应性，以便在移动设备上外观看起来更漂亮并减少到两行，但我遇到了问题，因为我必须使用 bootstraps css。

我正在努力完成的事情。
https://jsfiddle.net/5u3a2snh/8/

无法让它与 Bootstrap 一起工作:
https://jsfiddle.net/5u3a2snh/9/

我的成熟元素不会因为 Bootstrap 而接受任何更改:
https://jsfiddle.net/vo1npqdx/320/

有人可以帮我让它在仍然使用 bootstraps css 的情况下工作吗？我不确定为什么 css 对我的表影响如此之大。

<div class="col-lg-12 col-md-12 col-sm-12">
    <div class="table-responsive">
        <table class="table table-bordered table-striped"> 
            <thead> 
                <tr> 
                    <th>Pay</th> 
                    <th>Print</th> 
                    <th>Year</th> 
                    <th>Property Id</th> 
                    <th>Name/Location</th> 
                    <th>Status</th> 
                    <th>Amount Paid</th> 
                    <th>Date Paid</th> 
                    <th>Due</th> 
                    <th>Pin</th> 
                    <th>Box</th>
                </tr> 
            </thead> 
            <tbody> 
                <tr>
                    <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td> 
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>2016</td> 
                    <td><a href="invoicepage.html">2609110008</a></td> 
                    <td>Table cell</td> 
                    <td>Paid</td> 
                    <td>1,372.37</td> 
                    <td>12/01/2016</td> 
                    <td>0.00</td> 
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr> 
                <tr> 
                    <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td>  
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>2015</td> 
                    <td><a href="invoicepage.html">2609110008</a></td>
                    <td>Table cell</td> 
                    <td>Paid</td>
                    <td>1,430.83</td> 
                    <td>02/22/2016</td> 
                    <td>0.00</td> 
                    <td>Table cell</td>
                    <td>Table cell</td> 
                </tr> 
                <tr> 
                    <td scope="row"><button class="btn btn-info btn-xs">Pay Now</button></td>  
                    <td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td> 
                    <td>2014</td> 
                    <td><a href="invoicepage.html">2609110008</a></td> 
                    <td>Table cell</td> 
                    <td>Paid</td> 
                    <td>1,407.88</td> 
                    <td>02/02/2015</td> 
                    <td>0.00</td> 
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr> 
            </tbody>
        </table>
    </div>
</div>

添加了 JS 标签，因为它是我在这个元素中使用的另一种语言，因此也可以使用它来修复它。

Answer 1

您需要为您的 css 提供更具体的选择器，以便您的 css 用于您想要的元素而不是 Bootstrap css。例如，我更新了您的 css 类:

td { 
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            padding-left: 50%; 
        }

收件人:

table.table-bordered tr td { 
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            padding-left: 50%; 
        }

其中声明 tr 内的 td 位于具有 css 类 table-border 的 table 内使用这些样式而不是不太具体的 Bootstrap 样式。

请查看您的 fiddle 分支:https://jsfiddle.net/2tq9gy24/1/

注意:您应该检查所有的 css，并使其在被 Bootstrap 覆盖的地方更加具体。