PDA

View Full Version : سوال: مشکل فیکس کردن یک سطر از جدول


IMANAZADI
سه شنبه 02 دی 1393, 09:39 صبح
با سلام


کد زیر رو در نظر بگیرید








<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


<style>


.tbl{display: table;border-collapse:collapse; table-layout:fixed; width:400px;}
.row{display: table-row;}
.cell{display:table-cell;height:25px;text-align:center; vertical-align:middle; word-wrap:break-word; border:1px solid #999;}




.a{ width:60px;}
.b{ width:180px;}
.c{ width:90px;}
.d{ width:70px;}




.sticky
{
display:table-row;
position:fixed;
top:0px;
background-color:#6CF;
}


</style>
</head>


<body>


<div class="tbl">


<div class="row" id="header">


<div class="cell a" >Row</div>
<div class="cell b">Detail</div>
<div class="cell c">Description</div>
<div class="cell d">yes/no</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>
<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>




<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


<div class="row" >


<div class="cell a">1</div>
<div class="cell b">rrrr</div>
<div class="cell c">fsdfsdfsdf</div>
<div class="cell d">ss</div>
</div>


</div>


</body>


<script>
window.onscroll=function(){
var x=document.getElementById('header');


if(window.pageYOffset>50)
{
x.classList.remove('row');
x.classList.add('sticky');
}
if(window.pageYOffset<50)
{
x.classList.remove('sticky');
x.classList.add('row');
}

}
</script>
</html>





زمانیکه صفحه اسکرول میخوره همه چیز بهم میخوره
اگر از کلاس tbl خاصیت width رو حذف کنیم و مقادیر ستون detail رو کوتاه کنیم بطوریکه عرض سلول از عرض تعیین شده افزایش پیدا نکنه درست میشه
ولی من میخوام زمانیکه مقادیر هر سلول از عرض تعیین شده تجاوز کرده خط شکسته شود و مابقی در زیر همان خط نشون داده بشه


کسی میدونه چطوری باید این مورد رو حل کرده
IMANAZADI
چهارشنبه 03 دی 1393, 12:28 عصر
کسی نبود اینو واسه ما توضیح بده
white tower
چهارشنبه 03 دی 1393, 22:20 عصر
عزیز جان
اون تگ های font که بین استایل هات گذاشتی کارت رو خراب کرده.کدهات درسته.فقط اونا رو حذف کن.توی css کد html نوشتی!؟
IMANAZADI
پنج شنبه 04 دی 1393, 12:05 عصر
کجا تگ فونت گذاشتم ؟؟؟؟:متعجب::متفکر:
من چیزی نمیبینم:ناراحت:
اگه منظورت اینه


<font color="#ff0000">

:اشتباه:
که من وقتی کدهای رو تو سایت گذاشتم واسه اینکه ابن دو کلمه که بین تگ فونت هست متمایز بشه اونا رو توسط خود ادیتور سایت برنامه نویس رنگشو قرمز کردم
و گرنه این تگ ها در کدهای اصلی من نیست
:قهقهه:
white tower
پنج شنبه 04 دی 1393, 22:50 عصر
کجا تگ فونت گذاشتم ؟؟؟؟:متعجب::متفکر:
من چیزی نمیبینم:ناراحت:
اگه منظورت اینه


<font color="#ff0000">

:اشتباه:
که من وقتی کدهای رو تو سایت گذاشتم واسه اینکه ابن دو کلمه که بین تگ فونت هست متمایز بشه اونا رو توسط خود ادیتور سایت برنامه نویس رنگشو قرمز کردم
و گرنه این تگ ها در کدهای اصلی من نیست
:قهقهه:

بد جور کدهات رو قرمز کردی.خودت کد قرمزی می بینی؟ من کد شما رو کپی کردم و تست کردم دیدم مشکلی نداره جز همون تگ های نامربوط. همه مشکلات از خودته . کدت که مشکل نداره . یعضی هاش هم به روش خودت قرمز کردی که فقط خودت اونها رو قرمز می بینی. به هر حال من خواستم کمکت کرده باشم
IMANAZADI
جمعه 05 دی 1393, 06:26 صبح
دوست عزیز ممنون از راهنماییت
ناراحت نشو قصد توهین نداشتم
ولی شما کدها رو بدون اون تگ فونت کپی کن و اجرا کن
واسه بهتر نشون دادن قضیه عکس میزارم

126891


عکس بعد از اسکرول

126892
IMANAZADI
شنبه 06 دی 1393, 06:11 صبح
کسی از دوستان نمیدونه چه جوری باید این مشکل رو حل کرد
IMANAZADI
یک شنبه 07 دی 1393, 10:10 صبح
:گریه::گریه::گریه:
یعنی کسی تا به حال این مشکل واسش پیش نیامده