Question

我使用angularjs＆amp;我的桌子的twitter bootstrap。

<div class="container-fluid" style="overflow:auto">
    <table class="table table-striped" style="table-layout:fixed">
        <tr ng-repeat='(key,val) in arr' class="row">
            <td class="span1" style="width:150px;">
                    <h4>{{key}}</h4> 
            </td>
            <td class="span1" style="width:150px;" ng-repeat='(nestedKey,nestedVal) in val'>    <a href='{{nestedVal}}' target="_blank">{{nestedKey}}
                    <br>
                    <img src='{{nestedVal}}' style="width: 150px; height: 75px;" class="img-rounded"/>
                    </a>
            </td>
        </tr>
    </table>
</div>

然而，overflow:scroll创建了一个永不激活的虚拟滚动条。每当我调整浏览器的大小时，我的图像变得非常小并且挤压紧密并且彼此重叠。

出了什么问题？

Answer 1

您可以在表格上使用min-width css属性，从而在屏幕较小时使表格保持特定的最小宽度：

table{
   min-width:800px;
}

或者，您也可以使用CSS media queries调整表格的布局/宽度以用于移动视图：

@media all and (max-width: 800px){
  /* your table specific query here */
}

最快的是解决方案1

如何修复表的大小，以便在调整浏览器页面大小时不会挤压单元格？

1 个答案: