<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Simple responsive table - demo 2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

    table

    {

        margin: 0;

        border-collapse: collapse;

    }

    td, th

    {

        padding: .5em 1em;

        border: 1px solid #999;

    }

    .table-container

    {

        width: 100%;

        overflow-y: auto;

        _overflow: auto;

        margin: 0 0 1em;

    }

    .table-container::-webkit-scrollbar

    {

        -webkit-appearance: none;

        width: 14px;

        height: 14px;

    }

    .table-container::-webkit-scrollbar-thumb

    {

        border-radius: 8px;

        border: 3px solid #fff;

        background-color: rgba(0, 0, 0, .3);

    }

</style>

</head>

<body>

<div class="container">

    <div class="table-container">

        <table>

            <tr>

                <th>Header 1</th>

                <th>Header 2</th>

                <th>Header 3</th>

                <th>Header 4</th>

                <th>Header 5</th>

                <th>Header 6</th>

                <th>Header 7</th>

                <th>Header 8</th>

            </tr>

            <tr>

                <td>row1_cell1</td>

                <td>row1_cell2</td>

                <td>row1_cell3</td>

                <td>row1_cell4</td>

                <td>row1_cell5</td>

                <td>row1_cell6</td>

                <td>row1_cell7</td>

                <td>row1_cell8</td>

            </tr>

            <tr>

                <td>row2_cell1</td>

                <td>row2_cell2</td>

                <td>row2_cell3</td>

                <td>row2_cell4</td>

                <td>row2_cell5</td>

                <td>row2_cell6</td>

                <td>row2_cell7</td>

                <td>row2_cell8</td>

            </tr>

            <tr>

                <td>row3_cell1</td>

                <td>row3_cell2</td>

                <td>row3_cell3</td>

                <td>row3_cell4</td>

                <td>row3_cell5</td>

                <td>row3_cell6</td>

                <td>row3_cell7</td>

                <td>row3_cell8</td>

            </tr>

            <tr>

                <td>row4_cell1</td>

                <td>row4_cell2</td>

                <td>row4_cell3</td>

                <td>row4_cell4</td>

                <td>row4_cell5</td>

                <td>row4_cell6</td>

                <td>row4_cell7</td>

                <td>row4_cell8</td>

            </tr>

            <tr>

                <td>row5_cell1</td>

                <td>row5_cell2</td>

                <td>row5_cell3</td>

                <td>row5_cell4</td>

                <td>row5_cell5</td>

                <td>row5_cell6</td>

                <td>row5_cell7</td>

                <td>row5_cell8</td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>

容器,表格 ,div,元素可左右拖动,滚动 css的更多相关文章

  1. html5--1.18 div元素与布局

    1.18 div元素与布局 1.元素的分类2.div元素与布局 1.元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...

  2. vue实现拖动div元素

    html: <div id="app1"> <div v-drag class="drag"></div> <div ...

  3. js实现元素范围内拖动

    元素拖拽,网上一堆的实现,其中很多是原生js写的,都不够简洁,甚至运行后看不到效果. 于是乎,安静地想了下,拖动元素貌似就是一个滑动事件的监听处理,具体操作如下: 1.一个外层DIV,或者直接用根节点 ...

  4. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  5. dom元素的自上而下自动滚动

    dom元素的自上而下自动滚动 <!doctype html> <html lang="en"> <head> <meta charset= ...

  6. HTML 布局 - 使用<div> 元素

    网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样).高佣联盟 www.cgewang.com 大多数网站可以使用 <div> 或者 <table> 元素来创建多列 ...

  7. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  8. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  9. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. BadgeView 圆形数字提醒 购物车常用

    实际上BadgeView这个类就是继承TextView的.很多TextView中设置字体的方法都适用于BadgeView. 1. setTargetView(View) --> 设置哪个控件显示 ...

  2. 网站文章分享到微博，微信、qq空间--举例用织梦

    有对应接口的,传递参数过去就行了,注意下面的{..},需要替换为你的内容,看参数名称你应该知道是什么东东 新浪地址接口http://service.weibo.com/share/share.php? ...

  3. Python 字符串（center）

    center 描述 Python center() 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串.默认填充字符为空格. 语法 center()方法语法: str.center(w ...

  4. 前端面试问题html汇总

    1.对WEB标准以及W3C的理解与认识 结构层 html :表示层  css:行为层:js; 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索机率.使用外链css和js脚本.结构行为表现的分离.文件下 ...

  5. HTTP.ResponseCode

    HTTP响应码: http://blog.csdn.net/cutbug/article/details/4024818

  6. iOS.Notification.Bar.Color

    Reference: http://apple.stackexchange.com/questions/44246/what-determines-the-special-color-of-the-s ...

  7. BZOJ1084或洛谷2331 [SCOI2005]最大子矩阵

    BZOJ原题链接 洛谷原题链接 注意该题的子矩阵可以是空矩阵,即可以不选,答案的下界为\(0\). 设\(f[i][j][k]\)表示前\(i\)行选择了\(j\)个子矩阵,选择的方式为\(k\)时的 ...

  8. 关键词提取_textbank

    脱离语料库,仅对单篇文档提取 (1) pageRank算法:有向无权,平均分配贡献度 基本思路: 链接数量:一个网页越被其他的网页链接,说明这个网页越重要 链接质量:一个网页被一个越高权值的网页链接, ...

  9. 设计师别浪费时间啦，快来试试这款Sketch标注插件吧

    随着移动互联网的快速发展,用户的需求也在不断地增大,这对产品经理还有设计师的考验是越来越大.市场环境的变化让我们深信为快不破,但是一个产品的产出需要各个环节的紧密配合,但往往在产品输出过程中,由于分工 ...

  10. Android资源相关语法

    2018-08-29 getResources().getString(Rid)获取配置中的字符串