برای دیده شدن مشکل یک نمونه ساده بر اساس همین ساختار کنونی شما (گذاشتن هر fieldset در یک td) درست کردم،
بخشهای اضافی اون رو که نیازی نبود برداشتم (divهای دور فیلدها)،
همه inline styleها رو برداشتم و به بخش style در head بردم تا نگهداری و خوندن داکیومنت ساده تر باشه،
استایل ها رو ساده کردم که فقط وضعیت رو نشون بده- برای همین دورtdها و fieldsetها border گذاشتم،
و برای اینکه مطمئن بشم در کنترل web-browser هم همین رو میبینم اون رو در compatibility view مرورگر edge تست کردم:
1.png
کدهای html
<body>
<table id="frame">
<thead>
<tr>
<th colspan="2" class="header">مدیریت حساب کاربری</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<fieldset>
<legend>(<span name="num"></span>) ویرایش اطلاعات حساب کاربری </legend>
<label for="UserID">پست الکترونیک:</label>
<input id="UserID" name="UserID" type="text" />
<label for="UserName">نام کاربری (نام و نام خانوادگی):</label>
<input id="UserName" name="UserName" type="text" />
<button id="SaveChangesButton" name="SaveChangesButton">ثبت تغییرات</button>
</fieldset>
</td>
<td>
<fieldset>
<legend>(<span name="num"></span>) تغییر رمز عبور </legend>
<label for="OldPassword">رمز:</label>
<input id="OldPassword" name="OldPassword" type="password" />
<label for="Password">رمز جدید:</label>
<input id="Password" name="Password" type="password" />
<label for="ConfirmPassword">تائید رمز:</label>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" />
<button id="ChangePasswordButton" name="ChangePasswordButton">تغییر رمز عبور</button>
</fieldset>
</td>
</tr>
</tbody>
</table>
</body>
کدهای css
body {
direction: rtl;
font-family: Vazirmatn;
}
.header {
background-color: #2196F3;
color: white;
}
#frame {
margin: 0px auto;
}
#frame td {
padding: 20px;
width: 300px;
counter-increment: Index;
}
#frame td,
#frame th {
outline: 2px solid red;
}
#frame fieldset {
display: flex;
flex-direction: column;
border: 2px solid green;
background-color: bisque;
}
#frame input {
margin-bottom: 10px;
}
#frame button {
font-family: Vazirmatn;
}
span[name="num"]::after {
content: counter(Index);
}
ساختار کلی داکیومنت
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>589361</title>
<style>
...
</style>
</head>
<body>
...
</body>
</html>
خب مشخص هست که فیلدست سمت راست چون اندازه اش مشخص نیست
نمیتونه قدش رو با سمت چپی یکی کنه (اون 100% رو برداشتم چون تاثیری نداره)
چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
پاسخ با نقل قول
نوشته شده توسط mazoolagh
نقل قول: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
