width на таблицата е 100%

[anonimen]

Здравейте! Сега правя едно нещо с animate ефекта на jquery и имам една таблица, която е някъде 40% от прозореца и имам копче "надясно!" и при цъкане таблицата се премества надясно. Но проблемът е, че таблицата застава примерно в средате на страницата, а се появява лента за превъртане (ляво-дясно), която е напълно безсмислена. И сложих border на таблицата и видях, че той е 100% и затова браузърът решава, че ще се скрие съдържанието на таблицата и затова има скролче. И сега се чудя как да направя бордера да минава около таблицата, а не да се проточва до края на страницата.
Пробвах да напиша width: auto, но не става :idea:

 

[bytheway]

Пробвай да сложиш малко код тук, пък може и да помогнем

А ако имаш и някакво демо, ще бъде най-добре.

 

[anonimen]

Нещо такова:
(Сложил съм бордера за да се виждат границите на формата)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Нещо</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
		$(document).ready(function(){
			$("#right").click(function(){
				$("form").animate({"left":"+=200px"});
			});
			$("#left").click(function(){
				$("form").animate({"left":"-=200px"});
			});
			$("#top").click(function(){
				$("form").animate({"top":"-=200px"});
			});
			$("#bottom").click(function(){
				$("form").animate({"top":"+=150px"});
			});
			$("#iright").click(function(){
				$("#navigator").animate({"left":"+=250px"});
			});
		});
		</script>		
		<style>
			tr > td {text-align: right}
			td[colspan] {text-align: center}
		</style>
		
	</head>
	<body>
		<hr />
		<form style="position:relative; outline-width:2px; border: 1px solid red">
		<table border="0">
			<tr><td>Сантиметри:</td>
			<td>
				<input type="text" id="sm" size="23" value="Моля, въведете стойност" />
			</td><td><a href="#" onclick="document.getElementById('sm').value='';">изтрий</a></td></tr>
			<tr><td>Милиметри:</td><td>
				<input type="text" id="mm" size="23" value="Моля, въведете стойност" />
			</td><td><a href="#" onclick="document.getElementById('mm').value='';">изтрий</a></td></tr>
			<tr><td>Инчове:</td><td>
				<input type="text" id="inch" size="23" value="Моля, въведете стойност" />
			</td><td><a href="#" onclick="document.getElementById('inch').value='';">изтрий</a></td></tr>
			<tr><td>Mетри:</td><td>
				<input type="text" id="m" size="23" value="Моля, въведете стойност" />
			</td><td><a href="#" onclick="document.getElementById('m').value='';">изтрий</a></td></tr>
			<tr><td colspan="2"><input type="reset" value="Изчисти!" /></td></tr>
		</table>
		</form><hr />
		<div id="navigator" style="position: relative;">
		<input type="button" value="Вляво!" id="left" class="nav" />
		<input type="button" value="Вдясно!" id="right" class="nav" /><br />
		<input type="button" value="Нагоре!!" id="top" class="nav" />
		<input type="button" value="Надолу!" id="bottom" class="nav" />
		<input type="button" value=">>" id="iright" />
		</div>
	</body>
</html>

 

[bytheway]

Form елемента е блоков, затова по подразбиране заема 100% от ширината на родителския елемент. В случая родителския елемент на form е body.

Друго нещо, което забелязах е, ти местиш цялата форма. Това не е нужно. Доколкото разбирам ти искаш да местиш таблицата. Тогава по-добре би било да използваш table в jQuery селекторите, а не form.

Ето до какво достигнах аз:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Нещо</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script>
      $(document).ready(function(){
         $("#right").click(function(){
            $("table").animate({"left":"+=200px"});
         });
         $("#left").click(function(){
            $("table").animate({"left":"-=200px"});
         });
         $("#top").click(function(){
            $("table").animate({"top":"-=200px"});
         });
         $("#bottom").click(function(){
            $("table").animate({"top":"+=150px"});
         });
         $("#iright").click(function(){
            $("#navigator").animate({"left":"+=250px"});
         });
      });
      </script>      
      <style>
         tr > td {text-align: right}
         td[colspan] {text-align: center}
      </style>
      
   </head>
   <body>
      <hr />
      <form>
      <table border="0" style="position:relative; outline-width:2px; border: 1px solid red">
         <tr><td>Сантиметри:</td>
         <td>
            <input type="text" id="sm" size="23" value="Моля, въведете стойност" />
         </td><td><a href="#" onclick="document.getElementById('sm').value='';">изтрий</a></td></tr>
         <tr><td>Милиметри:</td><td>
            <input type="text" id="mm" size="23" value="Моля, въведете стойност" />
         </td><td><a href="#" onclick="document.getElementById('mm').value='';">изтрий</a></td></tr>
         <tr><td>Инчове:</td><td>
            <input type="text" id="inch" size="23" value="Моля, въведете стойност" />
         </td><td><a href="#" onclick="document.getElementById('inch').value='';">изтрий</a></td></tr>
         <tr><td>Mетри:</td><td>
            <input type="text" id="m" size="23" value="Моля, въведете стойност" />
         </td><td><a href="#" onclick="document.getElementById('m').value='';">изтрий</a></td></tr>
         <tr><td colspan="2"><input type="reset" value="Изчисти!" /></td></tr>
      </table>
      </form><hr />
      <div id="navigator" style="position: relative;">
      <input type="button" value="Вляво!" id="left" class="nav" />
      <input type="button" value="Вдясно!" id="right" class="nav" /><br />
      <input type="button" value="Нагоре!!" id="top" class="nav" />
      <input type="button" value="Надолу!" id="bottom" class="nav" />
      <input type="button" value=">>" id="iright" />
      </div>
   </body>
</html>

 

[anonimen]

Мерси много +1