У меня есть HTML-форма с таблицей внутри. Код выглядит следующим образом:
Мой код:
<html>
<head></head>
<body>
<form onsubmit="" id="form1" action="" method="post" name="form1" style="position: relative; background-color: green;">
<table style="width: 908px; background-color: yellow; position: absolute; left: 350px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
</tr>
</tbody>
</table>
<input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">
</form>
</body>
</html>
Я пытаюсь заставить таблицу двигаться, как встроенный тег, в примере, приведенном на этом учебном сайте. Код для конкретного примера, который я пытаюсь эмулировать, выглядит следующим образом:
Пример кода:
<html>
<head>
<style type="text/css" media="screen">
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example {
float:right;
}
#example div {
}
#div-before, #div-after {
background-color:#88d;
color:#000;
}
#div-1 {
width:400px;
background-color:#000;
color:#fff;
}
#div-1-padding {
padding:10px;
}
#div-1a {
background-color:#d33;
color:#fff;
}
#div-1b {
background-color:#3d3;
color:#fff;
}
#div-1c {
background-color:#33d;
color:#fff;
}
#example div p {
margin:0 .25em;
padding:.25em 0;
}
#description {
float:left;
width:40%;
}
pre {
padding:1em;
border:1px dashed #aaa;
background:#fafafa;
}
p {
margin:0.5em 0;
}
h3 {
color:#999;
}
.job {
margin-top:1em;
border:1px solid #aaa;
padding:1em;
background:#ddd;
}
</style>
</head>
<body>
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c"><p>id = div-1c</p></div>
</div></div><!-- /id=div-1-padding /id=div-1 -->
<div id="div-after">
<p>id = div-after</p>
</div>
</div><!-- /id=example -->
</body>
</html>
Чтобы описать то, что я пытаюсь выполнить, обратите внимание, что когда вы изменяете размер браузера, чтобы уменьшить его, основной элемент Пример кода и его дети будут перемещаться вместе с браузером, но по-прежнему оставаться в пропорции, когда он больше не может поместиться в окне браузера; тогда как при My Code дочерние элементы формы, то есть внутренняя таблица, останутся на том же месте даже при изменении размера браузера. Я хочу, чтобы он двигался, как в примере, я в замешательстве, поскольку моя интуиция говорит мне, что, поскольку таблица встроена в форму, даже если она абсолютно позиционирована в форме, она должна перемещаться, поскольку она расположена только относительно своего родительского элемента, а не окно браузера. Я что-то упускаю?
Примечание:
Чтобы избежать путаницы, в Мой код я добавил цвета фона только для личного ознакомления, их можно игнорировать.
UPDATE:
Вот ссылки на демонстрационные версии каждой страницы: ПРИМЕР ДЕМО , МОЙ КОД ДЕМО
ОБНОВЛЕНИЕ (Решение):
Хорошо, я смог решить это. Я обернул всю форму в тег div и присвоил ей следующие стили: position: relative; background-color: green; width: 910px; margin: 0px auto;. Я также удалил стили формы и изменил стиль таблицы следующим образом: width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;. Это перемещает все в центр и отражает поведение, описанное в примере кода. Вот модифицированный код для дальнейшего использования. Мне все еще интересно, почему бы не работать, когда стили были применены к форме? Есть ли принципиальная разница в том, как стили обрабатываются между тегами div и form ??? Спасибо за все ваши предложения.
<html>
<head></head>
<body>
<div style="position: relative; background-color: green; width: 610px; margin: 0px auto;">
<form onsubmit="" id="form1" action="" method="post" name="form1">
<table style="width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
</tr>
</tbody>
</table>
<input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">
</form>
</div>
</body>
</html>