<!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. 自编辑列的gridview，分页，删除，点击删除提示“确认”

    分页:    gridview的属性中:AllowPaging="True"  PageSize="2"    找到gridview的PageIndexChan ...

  2. linux命令学习之：curl

    curl命令是一个利用URL规则在命令行下工作的开源文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称curl为下载工具.作为一款强力工具,curl支持包括HTTP.HTTPS ...

  3. MyBatis代理开发(2)

    一.开发步骤和程序代码  1.程序员需要编写user.xml映射文件,程序员编写mapper接口需要遵循一些开发规范,mybatis可以自动生成mapper接口实现类代理对象. 2.创建数据库配置文件 ...

  4. ckplayer iis6 mp4 播放404错误

    设置mime. 1.右键网站 2.选择http头 3.点击编辑MIME按钮 4.新增MIME类型 5.在“扩展名”框内输入“mp4”,“MIME类型”框中输入“video/x-mp4” ps:类型不要 ...

  5. webstorm打开一个门户工程流程

    1.电脑上安装了nginx   ,进入conf目录下,找到nginx.conf打开 2.将原配置中server部分替换掉 server{ listen       80;     server_nam ...

  6. Service Broker 概述

    ServiceBroker(简称SSB)是基于数据库引擎提供的一个强大的异步编程模型,通过ServiceBroker,开发人员无需编写复杂的通信和消息程序,即可在数据库实例之间完成高效可靠的异步通信. ...

  7. 12.Mysql存储过程和函数

    12.存储过程和函数12.1 什么是存储过程和函数存储过程和函数是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程和函数简化应用开发人员的工作,减少数据在数据库和应用服务器之间的传输, ...

  8. laravel 门面的介绍和使用

    #上文讲述了laravel中怎么用容器依赖注入类的示例.其实在服务提供者上面在封装一层静态调用,这就是门面.静态调用门面,返回了容器中注册的别名和实例. #下面是测试的示例 #先创建要操作的类 < ...

  9. js 闭包 弊端

    闭包有许多有趣的用途,Javascript的两个特征使它这么有趣:1. function是一个对象,它跟数组,Object一样,地位平等.2. Javascript变量作用域范围.<Javasc ...

  10. tmux 快捷操作

    -- 基本使用 tmux   # 运行 tmux -2 以256终端运行 C-b d  # 返回主 shell , tmux 依旧在后台运行,里面的命令也保持运行状态 tmux ls # 显示已有tm ...