检查此示例: http: //jsfiddle.net/RvSK5/ 尝试调整窗口大小...
如何制作表格stretch
并shrink
始终保持父元素的 100% 宽度和高度。
如果我们将 div 缩小到非常小的尺寸,则<p>
可以防止表格缩小。我怎样才能解决这个问题?
检查此示例: http: //jsfiddle.net/RvSK5/ 尝试调整窗口大小...
如何制作表格stretch
并shrink
始终保持父元素的 100% 宽度和高度。
如果我们将 div 缩小到非常小的尺寸,则<p>
可以防止表格缩小。我怎样才能解决这个问题?
在您的示例中,段落中的文本阻止表格单元格缩小到父 div 的宽度。假设父 div 可以更宽,只需添加width: 100%
到表中。
#table{
border: 1px solid green;
width: 100%;
}
示例:http: //jsfiddle.net/RvSK5/3/
只需执行以下操作:
#test{
width:10%;
height:50%;
background-color:red;
}
#table{
border: 1px solid green;
width:100%; /* Make the width 100% of the parent */
}
如果您想获得更多见解,我建议您阅读http://www.impressivewebs.com/width-100-percent-css/
看到您必须为表格提供 100% 的宽度和高度,以使其伸展到其父 div 高度和宽度查看此链接