如何使 html 表格响应式？

Question

我已经使用 Bootstrap div 制作了下表，但它对移动设备不响应​​。我已经使用了 col-xs，但列在移动视图中仍然相互合并。是否有其他方法使此代码响应移动设备？

<div class="container" style="color: grey; padding-top: 40px">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-xs-12" style="border-bottom: 1px solid #eee;">

                <div class="col-md-6 col-xs-4">
                    <span>Item</span>
                </div>

                <div class="col-md-1 col-xs-1">
                    <span>Price</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Quantity</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Total</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Delivery Charge</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Discount</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Subtotal</span>
                </div>
            </div>


         </div>

</div>

    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-6 col-xs-6">
                <div class="col-md-5 col-xs-5">
                <img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
                </div>
            <div class="col-md-7 col-xs-7 ">
                <h5>Deisy brown Laptop Overnight</h5><br>
                <div class="row">
                    <div class="col-md-12 col-sm-2 ">
                        <h5>
                            <b>Seller Information:</b>
                        </h5>
                    </div>
                    <div class="col-md-12 col-sm-10">
                        <h6>
                            <b>Book Centre</b><br>

                            371 Colvinjh de sihjglva ,<br>
                            vvv Place,<br>
                            Chghhhgg2<br>
                            0123689955<br>
                        </h6>

                    </div>
                </div>
            </div>
            </div>

             <div class="col-md-1 col-xs-1">
            <span>5780</span><br>
        </div>
             <div class="col-md-1 col-xs-1">
            <span>  5780</span>
        </div>
            <div class="col-md-1 col-xs-1">
            <span> 5780</span>
        </div>
            <div class="col-md-1 col-xs-1">
            <span>0%</span>
        </div>
             <div class="col-md-1 col-xs-1">
            <span>575855</span>
        </div>
           <div class="col-md-1 col-xs-1">
            <span>575855</span>
        </div>
       </div>


    </div>

</div>

Answer 1

可以考虑使用以下四个选项来使表格具有响应性。请选择适合您要求的一种。

挤压：如果列内容很少，它们可能会水平挤压，在移动屏幕上不会出现问题，因此不更改布局需要是一个有效的选项。

垂直滚动：如果布局和内容准确且关键，用户可以向左或向右滚动。这在带有overflow=“auto”包装器的CSS中是微不足道的。

按行折叠：在小屏幕上将每一行拆分为自己的单列迷你表。将 display:table 切换为 display:block 将导致正常的表标记出现这种情况。

按列折叠：这就是事情变得棘手的地方。您无法使用纯 CSS 中的普通表标记来执行此操作，因为代码顺序是按行排列的，并且包装器将其锁定。我们要么必须更改标记，要么开始使用 JavaScript 进行操作。