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

Question

我有以下 HTML，使用 angularjs 和 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 媒体查询 为移动 View 调整表格的布局/宽度:

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

对您来说最快的方法是解决方案 1