tables wrapping to next line when width 100%
- by jmo
I'm encountering some weirdness with tables in css.
The layout is fairly simple, a fixed-width nav bar on the left and the content on the right. When the content includes a table with a width of 100% the table ends up getting pushed down until it has room to take up the full width of the screen (instead of just the area to the right of the nav bar). If I remove the width=100% from the table's css, then it looks fine, but obviously the table doesn't grow to fill the space of the div. The problem is that i want the table to grow and shrink with the window but still stay in the bounds of its div.
Thanks.
Here's a simple example:
<!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>
