如何根据屏幕大小调整表格宽度

时间:2017-01-11 19:08:38

标签: html css angularjs twitter-bootstrap angular-ui-bootstrap

我在这个页面上工作,其中包含一个modal-body内的表。

我工作的屏幕是22英寸,桌子看起来很完美。但是当我在笔记本电脑Macbook 13英寸上看到它时,桌子会延伸到屏幕的宽度。如何自动调整大小? enter image description here

<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>

2 个答案:

答案 0 :(得分:2)

您可以使用max-width代替width来获得最大尺寸1600像素的光 对于较小的屏幕,它达到100%

PS:或者是否定义了最小宽度?关于其他桌子怎么样?是否真的需要表格布局属性?

答案 1 :(得分:1)

使用百分比在任何地方指定宽度