• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مشکل فیکس کردن یک سطر از جدول
#1
با سلام

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


کد:
<!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 رو کوتاه کنیم بطوریکه عرض سلول از عرض تعیین شده افزایش پیدا نکنه درست میشه
ولی من میخوام زمانیکه مقادیر هر سلول از عرض تعیین شده تجاوز کرده خط شکسته شود و مابقی در زیر همان خط نشون داده بشه

کسی میدونه چطوری باید این مورد رو حل کرده
  پاسخ
تشکر شده توسط :
#2
عجب انجمن شلوغی ConfusedUndecidedSad

[عکس: attachment.php?attachmentid=126891&d=1419564344]

[عکس: attachment.php?attachmentid=126892&d=1419564373]
  پاسخ
تشکر شده توسط :
#3
تو سایت های مثل codepen.io مثالتون رو قرار بدید تا بشه بهتر راهنمایی کرد. اینطوری هزار دلیل ممکنه داشته باشه. از مرورگر تا بسته نشدن یک تگ
  پاسخ
تشکر شده توسط :
#4
Exclamation 
(۱۳۹۳ دى ۰۲, ۱۲:۲۱ ب.ظ)ImanAzadi نوشته: با سلام

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


کد:
<!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 رو کوتاه کنیم بطوریکه عرض سلول از عرض تعیین شده افزایش پیدا نکنه درست میشه
ولی من میخوام زمانیکه مقادیر هر سلول از عرض تعیین شده تجاوز کرده خط شکسته شود و مابقی در زیر همان خط نشون داده بشه

کسی میدونه چطوری باید این مورد رو حل کرده
کافیه به سلکتور tbl این کد رو اضافه کنید:
کد:
.tbl {
    word-wrap: break-word;
}
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان