javascript - 减小窗口大小时收缩表格以防止滚动条

Question

我有一个 HTML，顶部有一个导航栏，一个带有一些井的 div，然后是另一个 div，它是“主页”div。所以主页 div 中有一个包含几列的表格。这个表是一个表格，几乎都是输入。我试图在那里再添加一列，但页面让我向右溢出。

我想阻止它并使表格能够根据屏幕缩小。我在 15 英寸的屏幕上遇到了这个问题。虽然在 32'' 屏幕上没有问题，一切正常。

我的表格和 HTML 的 CSS 代码是，据我所见，表格上的输入应该能够根据它们获得的默认值进行收缩:

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%;}