<!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. VS unable to update auto-refresh path。。。。

    手工创建提示报错的路径,重新生成,成功

  2. MyBatis入门程序(1)

    一.入门程序: 1.mybatis的配置文件SqlMapConfig.xml 配置mybatis的运行环境,数据源.事务等. <?xml version="1.0" enco ...

  3. 点线特征双目视觉SLAM---暑期笔记

    1.由于以后可能研究有关基于特征方面的SLAM研究,所以近期看了一篇文章[基于点线综合特征的双目视觉SLAM方法--谢晓佳],由于之前对SLAM的模块比较模糊,所以认真阅读了此论文,并对主要的3个线程 ...

  4. Gradle编译报错

    问题重现 gradle build A problem occurred evaluating root project 'Spring4WebSocket'. > Failed to appl ...

  5. Vue 安装脚手架 工具 vue-cli (最新)

    假如您安装过旧版脚手架工具(vue-cli),您可以通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli卸载. Vue CLI 需要Node ...

  6. Linux移植之子目录下的built-in.o生成过程分析

    在Linux移植之make uImage编译过程分析中罗列出了最后链接生成vmlinux的过程.可以看到在每个子目录下都有一个built-in.o文件.对于此产生了疑问built-in.o文件是根据什 ...

  7. Java图形界面——Border

    Swing编程边框(Border)的用法总结 Java进行客户端编程,使用了大量的Swing控件,由于系统默认的边框无法满足项目的要求,不得不自己更改控件的边框样式,网上找了不少资料,本文对Swing ...

  8. 1、javaweb学习之配置文件web.xml

    今天这里主要讲述javaweb中的配置文件web.xml中的内容及其作用,都是基础部分,对于初学者需要好好掌握理解. 简单配置: <servlet>    <servlet-name ...

  9. ubuntu16.04安装wps

    下载: 我的电脑是64位的,所以选择64bit的deb包进行下载 1.下载地址:http://community.wps.cn/download/(去WPS官网下载) 安装: 2.执行安装命令:sud ...

  10. OpenGL3D图形、旋转、纹理、键盘移动、光照、滤波、透明（完整） 转自http://www.cnblogs.com/tiandsp/archive/2012/01/23/2329049.html

    #include <windows.h> // Windows的头文件 #include <stdio.h> #include <gl\gl.h> // OpenG ...