html - 使用 div 使表格伸展

Question

检查此示例： http: //jsfiddle.net/RvSK5/ 尝试调整窗口大小...

如何制作表格stretch并shrink始终保持父元素的 100% 宽度和高度。

如果我们将 div 缩小到非常小的尺寸，则<p>可以防止表格缩小。我怎样才能解决这个问题？

Answer 1

在您的示例中，段落中的文本阻止表格单元格缩小到父 div 的宽度。假设父 div 可以更宽，只需添加width: 100%到表中。

#table{
    border: 1px solid green;
    width: 100%;
}

示例：http: //jsfiddle.net/RvSK5/3/

Answer 2

只需执行以下操作：

#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/

Answer 3

看到您必须为表格提供 100% 的宽度和高度，以使其伸展到其父 div 高度和宽度查看此链接