<!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. JAVA HW2

    MODEL //yuec2 Yue Cheng package hw2; import java.io.File; import java.io.FileNotFoundException; impo ...

  2. linux服务器搭建

    centos7 java web项目环境搭配 2018年07月19日 17:20:21 阅读数:25 首先进行系统安装,此处不进行详细介绍,自行百度安装 一.配置ip地址信息 1.进入/etc/sys ...

  3. java_15 System类

    1.System类 2.System类方法 (1)currentTimeMillis() public static void main(String[] args) { long start = S ...

  4. js继承的几种类型

    首先提供构造函数 1. 构造函数实现继承 原理:改变函数上下文实现继承(call,apply,return,bind) return {}/function(){}   如果返回值是对象 那么this ...

  5. YII2中如何自定义全局函数

    有些时候我们需要自定义一些全局函数来完成我们的工作. 方法一: 直接写在入口文件处 <?php // comment out the following two lines when deplo ...

  6. stark组件开发之列表页面定制列

    先看一张页面展示的效果图: 看一看我的  model 表!是什么样子: 看一看数据库是什么样子: 看 页面展示图,有表头. 有数据.模型表中,每一个字段, 都指定了 verbose_name. 如何解 ...

  7. for循环中的 break和continue的区别

    break 语句用于跳出循环. for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + ...

  8. jQuery 实例

    选择器 $(this).hide() 隐藏当前的 HTML 元素. $("p").hide() 隐藏所有 <p> 元素. $(".test").hi ...

  9. msyql [note] mysqld (mysqld 5.6.40) starting as process xxxx...

    my.ini有2个配置一个是客户端[client],一个是服务器端[mysqld] 如果把2个都设置为utf8,那么中文会显示乱码,或者无法插入中文 而把客户端设置为gbk,把服务器端设置为utf8就 ...

  10. iOS.Notification.Bar.Color

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