减小窗口大小时缩小表格以防止滚动条答案

【问题标题】：Shrink table when decreasing window size to prevent scrollbars减小窗口大小时缩小表格以防止滚动条
【发布时间】：2019-06-24 22:39:00
【问题描述】：

我有一个顶部有一个导航栏的 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;
}

【问题讨论】：

那么如果表格不适合屏幕，您希望它缩小吗？
是的，我不希望表格内部溢出。
那么您希望输入像元大小也增加吗？
假设它取列数据的大小是的。可以说，如果去 column width 为空，则展开。而且我希望能够包装列标题。但我认为 css 中的一些简单的东西我不知道可以使它自动扩展或收缩
我添加了 input{width: 100%;} 现在看来是正确的。

标签： javascript html css responsive-design

【解决方案1】：

我已经添加了

input{width: 100%;}

【讨论】：