Я сталкиваюсь с некоторыми странностями с таблицами в css.
Компоновка довольно проста: навигационная панель фиксированной ширины слева и содержимое справа. Когда содержимое включает в себя таблицу шириной 100%, таблица в конечном итоге выталкивается вниз, пока у нее не остается места, чтобы занять всю ширину экрана (вместо области справа от навигационной панели). Если я удаляю width = 100% из css таблицы, то это выглядит нормально, но, очевидно, таблица не увеличивается, чтобы заполнить пространство div. Проблема в том, что я хочу, чтобы таблица увеличивалась и уменьшалась вместе с окном, но при этом оставалась в границах своего деления.
Спасибо.
Вот простой пример:
<!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>