Question

我有一个HTML，该HTML的顶部具有导航栏，一个具有一些井的div，然后是另一个div，即“主页面” div。因此，主页div中有一个包含几列的表。该表是一个表格，几乎都是输入。我试图在那儿再增加一列，然后页面在右侧溢出。

我想防止这种情况并使桌子能够根据屏幕收缩。我在15英寸的屏幕上遇到了这个问题。虽然在32英寸的屏幕上没有问题，但一切正常。

我的表和HTML的CSS代码是HTML，从表中我可以看到，表中的输入应该能够基于它们获得的默认值而缩小：

html, body {
    height: 100%;
    margin: 0;
}

#mileCtlTable{
    position: relative;
    vertical-align: middle;
    text-align: center;
    border-collapse: collapse;
    margin:auto;
    border: 3px solid black;
    //white-space: nowrap;
    width: 100%;
}


#mileCtlTable thead td{
    border: 1px solid black;
    font-style:oblique;
    text-align:center;
    //white-space: nowrap;
    margin:0vw;
    background-color: navy;
    color:white;
}

#mileCtlTable tbody td{
    border: 1px solid black;
    //width:auto;
    white-space: nowrap;
    text-align: center;
}



#mileCtlTable td,#mileCtlTable th{
    padding: 0.2vw 0.5vw;
}

#mileCtlTable input{
    text-align: center;
    //white-space: nowrap;
    padding: 0.2vw 0.5vw;
}

Answer 1

我已添加

input{width: 100%;}

缩小窗口大小以缩小表格以防止滚动条

1 个答案: