在减小 window 大小时缩小 table 以防止滚动条

Question

我有一个 HTML，顶部有一个导航栏，一个 div 有一些井，然后是另一个 div，即 "main page" div. 因此主页 div 中有一个 table，其中包含多个栏目。这个table是一个表格，几乎都是输入。我试图在那里再添加一列，但页面向右溢出。

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

我的 CSS table 和 HTML 代码是，据我所见，table 上的输入应该能够根据默认值缩小他们获得的价值：

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

在减小 window 大小时缩小 table 以防止滚动条

Shrink table when decreasing window size to prevent scrollbars

html

javascript

css

responsive-design