<!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. Flexible variants in STVARV

    DATA: lv_time TYPE TVARV_VAL, lv_tvarvc(25) . CONSTANTS lv_prefix(25) VALUE 'ZZXXS_'. CONCATENATE lv ...

  2. ABAP开发需要养成的习惯—程序修改数据库表

    ①此外将内表数据写入数据库,推荐用Modify而不是insert,因为会有些key一样的报dump loop at it_record. *          报错 *          insert ...

  3. vue 初识组件

    Vue.component("greeting",{ template: `<p>{{ name }}大家好 <button v-on:click="c ...

  4. Vue 进度条 和 图片的动态更改

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. mysql 常用 sql

    查询表创建时间.修改时间等 SELECT * FROM information_schema.tables    WHERE table_schema='ty_supplier' AND table_ ...

  6. Linux netstat

    一.简介   二.语法   三.实例 1)查看TCP连接数 netstat -n | awk '/^tcp/ {++S[$NF]} END {for (a in S) print a, S[a]}'

  7. linux 文件搜索

    locate  文件名 在后台数据库中按文件名搜索,搜索速度快,不用遍历整个操作系统 /var/lib/mlocate locate 命令所搜索的后台数据库 updatedb 手动更新数据库 新建的文 ...

  8. JS-Date心得

    写在前面的话:我觉得JavaScript以后也要出像Java1.8新增的Date类,这个月份要是从1开始多好,强迫症很难受.......也就发发牢骚,没出来之前还得这么用..... 属性: const ...

  9. PAT 甲级 1008 Elevator (20)（代码）

    1008 Elevator (20)(20 分) The highest building in our city has only one elevator. A request list is m ...

  10. TCP窗口扩大选项

    TCP窗口扩大选项(TCP Window Scale Option) TCP窗口扩大选项 TCP Window Scale Option (WSopt) 窗口扩大选项用于扩大TCP通告窗口,使TCP的 ...