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

How to fix the size of a table so that on resizing the browser page the cells don't squeeze?

本文关键字：单元格 小时 浏览器 调整 表格 何固定      更新时间：2023-09-26

我有以下HTML使用angularjs &Twitter引导我的表。

<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创建了一个永远不会激活的虚拟滚动条。每当我调整浏览器的大小时，我的图像就会变得非常小，并且被挤得很紧，并且相互重叠。

怎么了?

您可以在表上使用min-width css属性，使表在屏幕较小时保持一定的最小宽度:

table{
   min-width:800px;
}

或者，你也可以适应你的表的布局/宽度与CSS media queries移动视图:

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

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

相关文章：