如何根据屏幕尺寸调整 table 宽度

Question

我正在处理这个页面，其中包含一个 table inside modal-body。

我使用的屏幕是 22 英寸，table 在上面看起来很完美。但是当我在我的笔记本电脑 Macbook 13 英寸上看到它时，table 延伸到屏幕的宽度。如何自动调整大小？

<div class="modal-body"
    style="width: 1600px; margin: 0 auto; overflow: hidden;">
    <loading></loading>
    <span us-spinner="{radius:30, width:8, length: 16}"
        spinner-key="spinner-1"></span>

    <div class="panel-group" id="accordion">
        <div class="panel panel-default"
            data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification' ">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <b> <a data-toggle="collapse" data-parent="#accordion"
                        href="#{{$index+1}}-{{value.id}}" target="_self"
                        style="color: black">{{spec}}</a>
                        <button class="btn btn-xs btn-link" ng-click="details(value)">
                            <i class="fa fa-info-circle" aria-hidden="true"></i>
                        </button>
                    </b>
                </h4>
            </div>
            <div id="{{$index+1}}-{{value.id}}" class="panel-collapse collapse">
                <div class="panel-body">
                    <table class="table" style="table-layout: fixed; width: 100%">
                        <thead>
                            <tr>
                                ---------------
                                ---------------
                                ---------------
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="val in value track by $index">
                                ----------------
                                ----------------
                                ----------------
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

根据需要使用百分比指定宽度

Answer 2

您可以使用 max-width 而不是 width 以获得最大尺寸 1600 像素
对于较小的屏幕，它达到 100%

PS：或者是否定义了最小宽度？其他 table 呢？ table-layout 属性真的需要吗？

如何根据屏幕尺寸调整 table 宽度

How to resize table width based on screen size

html

css

twitter-bootstrap

angularjs

angular-ui-bootstrap