Question

问题：我在div中有一个表，表中有很少的输入元素。当我调整浏览器窗口大小或将窗口更改为低分辨率时，div元素调整大小并缩小，并且还会出现水平滚动条，但表格会溢出其父div。例如，如果您调整浏览器窗口的大小，下面的代码会显示问题

代码 -

<html>
<body>
 <div style="border: 1px solid orange; padding: 1px">
  <span>level1</span>
  <div style="border: 1px solid blue; padding: 1px">
     <span>level2</span>
    <div style="border: 1px solid green; padding: 1px">
        <span>level3</span>
        <table style="border: 1px solid red;">
            <tbody>
                <tr>
                    <td>1</td>

                    <td><input value="2017-01-01"></td>
                    <td><input value="abc"></td>
                    <td><input value="3"></td>
                    <td><select>
                            <option value="">Select</option>
                            <option>abc</option>
                            <option>def</option>
                            <option>ghi</option>
                    </select></td>
                    <td><input value="10"></td>
                    <td><input value=""></td>
                </tr>
            </tbody>
        </table>
    </div>
 </div>
 </div>
</body>
</html>

必需的行为：父div元素及其所有父div元素应调整大小/展开，以使表不会溢出，用户可以使用浏览器的水平滚动条查看页面。即出现水平滚动条，但所有div都伸展，而表格不会溢出div / body

Answer 1

我希望能帮到你：

1）将template.find(Query.query(Criteria.where("product.companies").is(companList),Mobile.class);插入type="text"元素。

2）插入此css代码：

input

＆＃13;

input[type="text"] {
    width: 100%;//width relative to her parent(td Element).
}

＆＃13;

table {
	border: 2px solid red;
}
input[type="text"] {
	width: 100%;
}

＆＃13;

表内容溢出div

1 个答案: