我想用DIVS在我的桌面版本上实现滚动条...我想为我的身体元素添加一个滚动条...
它适用于整个表格，但不适用于我的身体元素......
JSFiddle：Click here
我的代码：
.scroll{
height: 200px;
overflow-y: scroll;
}
.table{
display: table;
table-layout: fixed;
}
.header{
display: table-header-group;
background-color: green;
}
.header .row{
display: table-row;
}
.header .row .cell{
display: table-cell;
}
.body{
display: table-row-group;
background-color: red;
}
.body .row{
display: table-row;
}
.body .row .cell{
display: table-cell;
}<p>some content here</p>
<div class="grid5">
<div class="grid">
<div class="wrap">
<div class="scroll">
<div class="table">
<div class="header">
<div class="row">
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
</div>
</div>
<div class="body">
<div class="row">
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
试试这个： -
.scroll{
height: 200px;
}
.table{
display: table;
table-layout: fixed;
}
.header{
display: table-row;
background-color: green;
}
.header .row{
display: table-row;
}
.header .row .cell{
display: table-cell;
}
.body{
background-color: red;
height:200px;
overflow-y:auto;
}
.body .row{
display: table-row;
}
.body .row .cell{
display: table-cell;
}<p>some content here</p>
<div class="grid5">
<div class="grid">
<div class="wrap">
<div class="scroll">
<div class="table">
<div class="header">
<div class="row">
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
<div class="cell">Colonne</div>
</div>
</div>
<div class="body">
<div class="row">
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
</div>
<div class="row">
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
</div>
<div class="row">
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
</div>
<div class="row">
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
</div>
<div class="row">
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
</div>
<div class="row">
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
</div>
<div class="row">
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
</div>
<div class="row">
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
</div>
<div class="row">
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
</div>
<div class="row">
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
</div>
<div class="row">
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
</div>
<div class="row">
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
</div>
<div class="row">
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
<div class="cell">Ligne #1</div>
</div>
<div class="row">
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
<div class="cell">Ligne #2</div>
</div>
<div class="row">
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
<div class="cell">Ligne #3</div>
</div>
<div class="row">
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
<div class="cell">Ligne #4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>