Css 宽度为100%时表格换行到下一行
我在css中遇到了一些奇怪的表格。 布局相当简单，左侧是固定宽度的导航栏，右侧是内容。当内容包含宽度为100%的表格时，表格最终会被向下推，直到有足够的空间占据整个屏幕宽度（而不仅仅是导航栏右侧的区域）。如果我从表的css中删除width=100%，那么它看起来很好，但很明显，表的增长并不能填满div的空间。问题是我希望表随窗口增长和收缩，但仍然保持在其div的范围内 谢谢 下面是一个简单的例子：Css 宽度为100%时表格换行到下一行,css,Css,我在css中遇到了一些奇怪的表格。 布局相当简单，左侧是固定宽度的导航栏，右侧是内容。当内容包含宽度为100%的表格时，表格最终会被向下推，直到有足够的空间占据整个屏幕宽度（而不仅仅是导航栏右侧的区域）。如果我从表的css中删除width=100%，那么它看起来很好，但很明显，表的增长并不能填满div的空间。问题是我希望表随窗口增长和收缩，但仍然保持在其div的范围内 谢谢 下面是一个简单的例子： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 T
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#content {
padding-right:20px;
background:white;
overflow:hidden;
margin:20px;
}
#content .column {
position:relative;
padding-bottom: 20010px;
margin-bottom: -20000px;
}
#center {
width:100%;
padding-top:15px;
}
body {
min-width:700px;
}
#left {
width: 330px;
padding: 0 10px;
padding-top:10px;
float:left;
}
.tableData {
width:100%;
}
</style>
</head>
<body>
<div id="content">
<div class="column" id="left">
<div>
Some text goes in here<br/>
some more text<br/>
some more text<br/>
some more text<br/>
some more text<br/>
some more text<br/>
</div>
</div>
<div class="column" id="center">
Some text at the top;
<hr/>
<table class="tableData">
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr>
<td>A1 A1 A1 A1</td>
<td>B1 B1 B1 B1</td>
<td>C1 C1 C1 C1 C</td>
</tr>
<tr>
<td>A2 A2 A2 A2 </td>
<td>B2 B2 B2 B2 </td>
<td>C2 C2 C2 C2</td>
</tr>
<tr>
<td>A3 A3 A3 A3 A3 </td>
<td>B3 B3 B3 B3 B3 </td>
<td>C3 C3 C3 C3 C3</td>
</tr>
<tr>
<td>A4 A4 A4 A4 A4</td>
<td>B4 B4 B4 B4 B4</td>
<td>C4 C4 C4 C4 C4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
测验
#内容{
右边填充：20px；
背景：白色；
溢出：隐藏；
利润率：20px；
}
#内容栏{
位置：相对位置；
垫底：20010px；
利润底部：-20000px；
}
#居中{
宽度：100%；
填充顶部：15px；
}
身体{
最小宽度：700px；
}
#左{
宽度：330px；
填充：0 10px；
填充顶部：10px；
浮动：左；
}
.表格数据{
宽度：100%；
}
这里有一些文字
更多文本
更多文本
更多文本
更多文本
更多文本
顶部有一些文字；
基础知识
A1 A1 A1
B1 B1
C1 C
A2 A2
B2 B2
指挥与控制
A3
B3 B3 B3 B3 B3 B3
C3 C3
A4
B4 B4 B4 B4 B4 B4
C4C4C4C4
#center {
padding-left:350px
}
填充底部的处理方法是什么：20010px；利润底部：-20000px？我有它在那里有相同高度的柱子。顺便说一句，是350，不是330，因为侧边栏的两侧都有额外的10px的填充。在保持宽度在#中间的情况下添加左填充会导致表格在页面的一侧被截断删除宽度：100在#中间有完整的表格，但在左列结束后会向下移动以开始。这与添加左边的填充。直到左列中的文本结束，表格结果才会开始。
#center {
margin-left:330px;
/*width:100%;*/
padding-top:15px;
}