html - 在我的 body 元素上定位表格滚动条

标签 html css css-tables

我想在我使用 DIVS 构建的表格上实现一个滚动条...我想只为我的 body 元素添加一个 scroll-y 条...

它适用于整个表格但不适用于我的 body 元素...

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>

最佳答案

试试这个:- 

.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>

关于html - 在我的 body 元素上定位表格滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26927612/

上一篇：html - 粘性导航栏不会跟随 Internet Explorer 和 Chrome 中的页面滚动

下一篇：jquery - 以给定的比例更改 HTML 占位符图片的宽度和高度

相关文章：

javascript - 减少滚动页面延迟

php - 减少 PHP 执行时间

css - 将鼠标悬停在其他 div 上时 div 移动

css - 让 svg 在悬停时正确旋转

javascript - 单击子元素时如何防止模态显示？

css - Mailchimp 模板 CSS

html - 在 HTML 中强制 TR 高度

html - 复选框和标签在不同的代码中没有正确对齐相同的代码分开工作

html - 表格单元格对齐让我发疯

jquery - 使froala编辑器的父div高度可缩放

©2024 IT工具网  联系我们